Question

我正在使用KOGrid的仪表板，我的想法是动态创建一堆小部件并将数据绑定到每个小部件的kogrid。问题在于敲除绑定，我在动态创建DIV时使用myObsArray，并在视图模型中使用相同的，这导致所有小部件绑定到相同的数据（即，它是可观察的，覆盖数据为所有小部件的最后一个小部件）。我通过关联数组来解决这个问题的所有尝试都是徒劳的。非常感谢您的帮助。提前一百万感谢。

我有两个控制器（MVC4），其中第一个返回小部件名称列表，第二个以JSON格式返回结果（数据表）。我使用JSON.Net JsonConvert将结果转换为json格式，然后作为JSON内容结果传递。当我使用一个小部件时，一切都很好，但问题是当使用多个小部件时。

function loadWidgets(data) {
        //showLoading();
        var div1 = $("#db-col-1");
        var div2 = $("#db-col-2");
        div1.html('');
        div2.html('');
        $.each(data, function (index, item) {

            var li = "<li id='" + item.WIDGET_NAME + "_li'></li>";
            if (index % 2 == 0)
                div1.append(li);
            else
                div2.append(li);

            $("#" + item.WIDGET_NAME + "_li")
            .append("<div id= '" + item.WIDGET_NAME + "' class='example' data-      bind='koGrid: { data: myObsArray }'></div>"); //,
            LoadJson(item.WIDGET_NAME, item.WIDGET_NAME + "Arr" );

        });
    }


   function LoadJson(widgetName) {
        var wName = widgetName;
        $.getJSON('Home/GetWidgetDetails?widgetName=' + wName, 
            function (data) {
                window.viewModel = {
                        myObsArray: ko.observableArray(data) //myObsArray
                    };                                                                  
                    ko.applyBindings(viewModel);
                });        
    }

谢谢，沙市

Answer 1

首先，不要在可以多次调用的函数中调用ko.applyBindings。每次viewmodel只应发生一次此调用。这最近出现了很多，我开始认为有人在某个地方做了一个糟糕的教程。

其次，您的问题是您正在覆盖您的viewmodel。这一点：

window.viewModel = {
    myObsArray: ko.observableArray(data) //myObsArray
};

第一次调用它时，它会创建您的viewmodel。第二次+次，它覆盖了你的viewmodel。此外，编程创建HTML是不必要的。使用foreach绑定，Knockout更适合此任务。你似乎错过了很多淘汰赛的内容，所以如果你还没有这样做，我会鼓励你通过the tutorials。最后，您的HTML将无效。您正在制作li个节点而没有ol或ul将其放入。

以下是针对您的问题的MVVM解决方案in a fiddle。它被简化为演示绑定概念，并且不使用koGrid。

KoGrid JSON动态小部件

1 个答案: