javascript - ko.applybindings在动态html元素上不起作用

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

我正在尝试将 knockout 绑定(bind)应用于动态html行。没有任何成功。从我的代码中，我没有收到任何错误，但是单击下载按钮后，什么都没有发生。

码

View 模型

$(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");
                        });

                    }
                });
            };

        }

初始文档加载时的绑定(bind)

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

成功上传后，在documents表和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));

                    })
      }):

有任何想法吗？谢谢。

最佳答案

您需要重新应用绑定(bind)，例如:

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

但是我不建议这样做，因为我还记得它的支持不是很好(因为它不能清除事件处理程序)。

正确的方法是在支持文档中添加observableArray，然后在 View 中添加逻辑以循环考虑数组和显示行，而在success上，您只需要向observableArray添加新对象即可自动添加行。 (可以在there中找到漂亮的示例)。

关于javascript - ko.applybindings在动态html元素上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27226326/