Knockoutjs viewmodel 数据绑定在动态创建的 div 中不起作用答案

【问题标题】：Knockoutjs viewmodel data binding not working in dynamically created divKnockoutjs viewmodel 数据绑定在动态创建的 div 中不起作用
【发布时间】：2015-06-26 18:45:29
【问题描述】：

我创建了 div 并在用户单击给定链接时加载该 div。 div 加载后，我正在清除节点，然后应用绑定。

但是数据没有绑定到视图，它也不会产生任何错误。请检查以下代码并提出任何解决方案：

    $(document).on("click", ".popup-list", function (e) {
        var x = e.pageX, y = e.pageY, elm = this,
    left = $(elm).offset().left + 5,
    top = $(elm).offset().top + 25;var d = $("<div/>").addClass('myClass');
    var url = $(this).data("url") || $(this).attr("dataurl");
    d.load(url, function (response, status, xhr) {
        if (status == "error") {
            var msg = "<h2>Sorry!  Website encounter a problem. Please contact your system administration</h2> <br/>";
            d.html(msg + xhr.status + " " + xhr.statusText);
        }
    }).appendTo('div.myBody').css({ // d.html(tm)
        top: top,
        left: left,
        height: 0, opacity: 0,
    })

    $(d).animate({ height: '346px', width: '1074px', opacity: 1 }, 800)
    ViewModel.getItemList();
    ViewModel.ItemList.extend({ paging: 10 })
    ko.cleanNode($('.myClass'));
    ko.applyBindings(ViewModel, $('.myClass')[0]);
});

这是视图模型：

var ViewModel = {
ItemList: ko.observableArray([]),
getItemList: function () {
    $.ajax({
        url: "myurl"',
        data: "my para",
        type: 'POST',
        async: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            ViewModel.ItemList(data);
        }
    });
}

};

这是局部视图：

<ul data-bind="foreach : ItemList.currentPageData" >
<li>
    <div >
        <span data-bind="text:myProperty"></span>
    </div>

</li>

【问题讨论】：

ViewModel.subList(data) 中的 subList 是什么？
这是我的错误 subList 需要更改为 ItemList
ko.cleanNode($('.myClass')); 应该是 ko.cleanNode($('.myClass')[0]);
@haim770 更改后仍无法正常工作
@Wella，我认为它不能解决问题，这就是我没有发布答案的原因。但是，您需要显示 Ajax 请求返回的内容（ItemList 数组的结构）。

标签： javascript jquery asp.net asp.net-mvc knockout.js

【解决方案1】：

为什么不创建 ViewModel 的“实例”？

试试这个：

var viewModel = new ViewModel();
viewModel.getItemList();
viewModel.ItemList.extend({ paging: 10 })
// ko.cleanNode($('.myClass'));
ko.applyBindings(viewModel, $('.myClass')[0]);

我评论了 ko.cleanNode，因为它对我来说没有意义，但你可以尝试任何一种方式 :)

最好的问候

丹尼尔

【讨论】：

OP 使用object literal 构造VM（不是函数）的方式，因此不需要创建实例。欢呼