1

我正在使用 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);
                });        
    }

谢谢，沙希

4

1 回答 1

1

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

其次，您的问题是您正在覆盖您的视图模型。这一点在这里：

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

第一次调用它时，它会创建您的视图模型。第二次以上，它会覆盖您的视图模型。此外，无需以编程方式创建 HTML。Knockout 更适合通过foreach绑定执行此任务。你似乎错过了很多淘汰赛应该做的事情，所以我鼓励你阅读教程，如果你还没有这样做的话。最后，您的 HTML 将无效。您正在制作没有 a或将它们放入li的节点。olul

这是您的问题的 MVVM 解决方案，在 fiddle中。它被简化以演示绑定概念，并且不使用koGrid.

于 2012-07-25T16:24:33.400 回答