Question

我正在编写一些代码，当用户点击文件上传按钮时，成功时，在表格中添加一个包含下载按钮的新行。此按钮将附加一个数据绑定单击处理程序。

我试图将knockoutbindings应用于动态html行。没有任何成功。从我的代码中，我没有收到任何错误，但点击下载按钮后，没有任何反应。

码

视图模型

$(function () {

        // download section viewModel
        var viewModel = function () {
            self.downloadOrder = function (item, event) {
                var domElement = event.target;
                $.fileDownload('@Url.Action("test", "test")' + "?fileName=" + item.documentName + "&quoteNoEncrypted=" + item.quoteNoEncrypt, {

                    failCallback: function () {
                        $("<span style='position: absolute'> @TranslationService.Read("Waybill_Common_FileNoLongerExist", module, languageCode) </span>").insertAfter(domElement).fadeIn(1000, "linear", function () {
                            $(domElement).next().delay(2000).fadeOut("slow");
                        });

                    }
                });
            };

        }

初始文档加载时的绑定

        ko.applyBindings(viewModel, document.getElementById("documentSection"));
        ko.applyBindings(headerViewModel, document.getElementById("dashBoardHeader"));
        ko.applyBindings(quoteVM, document.getElementById("viewRequest"));

上传成功后，在文档表和applybindings中添加一行。问题

           $("#btncareerssubmimt").click(function () {
            $("#uploadDocumentForm").ajaxSubmit({
                type: "POST",
                success: function (data) {
                    $.each(data, function (index, file) {
                        // insert new datafile row to the table
                        $("#supporting-documents-table >tbody:last").append('<tr id=' + file.DocumentId + '><td>' + file.Title + '</td>' + '<td>' +
                            file.UploadDate + '</td>' + '<td>' + '<input type="button" value="@TranslationService.Read("Waybill_Common_DownloadTitle", module, languageCode)" data-bind="click: function(data, event){downloadOrder({quoteNoEncrypt: "@Model.QuoteNoEncrypt", documentName:' +
                            file.Title + '}, event)}" />' + '</td></tr>');

                        // get new row id
                        var rowId = $("#supporting-documents-table tr:last").attr('id');

                        // add the download knockout handler to this new row

                        ko.applyBindings(viewModel, document.getElementById(rowId));

                    })
      }):

任何想法？感谢。

Answer 1

您需要重新应用绑定，例如：

var element = document.getElementById("documentSection");
ko.cleanNode(element);
ko.applyBindings(viewModel, element);

但是我不建议这样做，因为我记得不太支持（因为它不清楚事件处理程序）。

这样做的正确方法是获得observableArray支持文档，而在视图中你需要添加逻辑来迭代思考该数组并显示行，而success只需要添加新的对象observableArray和行将自动添加。（很好的例子可以找到there）。

Answer 2

感谢Vladimirs的指导，问题是通过使用可观察数组来解决的。

我在现有的viewModel

中添加了一个uploadDocument函数

uploadDocument: function (documentList) {
        if (documentList != null) {
           _uploadButtonDisable(true)
              // start spinner  
            var target = document.getElementById('uploadMessage');           
            var spinner = new Spinner().spin(target);                                   

                        //show spinner
            $(target).val("").show();

            $("#uploadDocumentForm").ajaxSubmit({
                type: "POST",
                success: function (data) {
                $.each(data, function (index, file) {
                    // insert new datafile row to the table
                     documentList.push(file);
                     spinner.stop(spinner);
                     $("#uploadMessage").text('@TranslationService.Read("SSP_Common_Success_Text", "SSP", languageCode)').fadeIn(1000, "linear", function () {
                     $(this).delay(2000).fadeOut("slow", function () {
                           $(this).text("");
                     });

                  });
                  _uploadButtonDisable(false)

                })

                },
                    error: function () {
                        spinner.stop(spinner);
                                $("#uploadMessage").text('@TranslationService.Read("SSP_Server_Error_UI_Text", "SSP", languageCode)').fadeIn(1000, "linear", function () {
                                    $(this).delay(2000).fadeOut("slow", function () {
                                        $(this).text("");
                                    });

                                });
                                _uploadButtonDisable(false)
                                //input.replaceWith(input.val('').clone(true));

                            }
                        });
                        var input = $("#choose-file");

                    }
                }

绑定viewModel。

           var jsonModel = '@Html.Raw(JsonConvert.SerializeObject(this.Model))';
           var mvcwModel = ko.mapping.fromJSON(jsonModel);
           mvcwModel.viewModel = viewModel;

           ko.applyBindings(mvcwModel, document.getElementById("viewRequest"));

将uploadDocument附加到uploadButton

<tr>
   <td>
  <th><input type="button" value="@TranslationService.Read("Waybill_OrderDisplay_UploadSubmit", module, languageCode)" id="btncareerssubmimt" class=" floatRight" data-bind="disable: viewModel.uploadButtonDisable, click: function(){ viewModel.uploadDocument($root.Documents);}" /></th>
   </td>
</tr>

ko.applybindings无法处理动态html元素

2 个答案: