C# KoGrid JSON动态小部件

我正在使用KOGrid的仪表板上工作，我的想法是动态创建一组小部件，并将每个小部件的数据绑定到KOGrid中。问题在于敲除绑定，我在动态创建DIV时使用myObsArray，并且在视图模型中使用相同的方法，这会导致所有小部件绑定到相同的数据（即，可以观察到，覆盖所有小部件的最后一个小部件的数据）。我所有通过关联数组修复此问题的尝试都是徒劳的。非常感谢你的帮助。万分感谢

我有两个控制器（MVC4），第一个返回小部件名称列表，第二个返回JSON格式的结果（datatable）。我使用JSON.NETJSONConvert将结果转换为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);
                });        
    }

函数加载小部件（数据）{
//showLoading（）；
var div1=$（“#db-col-1”）；
var div2=$（“#db-col-2”）；
html（“”）；
html（“”）；
$。每个（数据、功能（索引、项目）{
var li=“
”；
如果（索引%2==0）
第1款附加（li）；
其他的
第2款追加（li）；
$（“#”+item.WIDGET_NAME+“_li”）
.附加（“”；/，
LoadJson（item.WIDGET_NAME，item.WIDGET_NAME+“Arr”）；
});
}
函数LoadJson（widgetName）{
var wName=widgetName；
$.getJSON（'Home/GetWidgetDetails？widgetName='+wName，
功能（数据）{
window.viewModel={
myObsArray:ko.observableArray（数据）//myObsArray
};                                                                  
应用绑定（视图模型）；
});        
}

谢谢，

---

shashi

首先，不要在可以多次调用的函数中调用

ko.applyBindings

。每个viewmodel只能执行一次此调用。这一点最近经常出现，我开始认为有人在某个不好的教程中做了这一点

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

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

第一次调用它时，它将创建viewmodel。第二次+时，它将覆盖viewmodel。此外，以编程方式创建HTML是不必要的。使用

foreach

绑定，Knockout更适合此任务。你似乎错过了很多淘汰赛的内容，所以如果你还没有完成的话，我会鼓励你去完成。最后，您的HTML将是无效的。您正在创建

li

节点，而不使用

ol

或

ul

来放置它们

---

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

koGrid

首先，不要在可以多次调用的函数中调用

ko.applyBindings

。每个viewmodel只能执行一次此调用。这一点最近经常出现，我开始认为有人在某个不好的教程中做了这一点

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

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

第一次调用它时，它将创建viewmodel。第二次+时，它将覆盖viewmodel。此外，以编程方式创建HTML是不必要的。使用

foreach

绑定，Knockout更适合此任务。你似乎错过了很多淘汰赛的内容，所以如果你还没有完成的话，我会鼓励你去完成。最后，您的HTML将是无效的。您正在创建

li

节点，而不使用

ol

或

ul

来放置它们

---

以下是解决您的问题的MVVM解决方案。它被简化为演示绑定概念，并且没有使用

koGrid

完全同意您的观点，非常感谢您的回复。修改代码如下。现在我得到了“uncaughterror：初始化可观察数组时传递的参数必须是数组、null或未定义”。嵌套的JSON调用是否存在问题？处理复杂对象数组并将其绑定到多个网格的最可靠方法是什么。它不允许我发布更新后的代码，所以又问了另一个问题：我实际上演示了在我发布的小提琴中制作一个复杂对象的

observearray

。您可以将对象定义为自己的viewModel，将JSON映射到它上，并用这些对象的数组填充

ObservalArray

。我不知道为什么它不允许你编辑你自己的问题。如果这解决了这个问题中的问题，请接受它。如果您认为没有，并且只打算使用您的新问题，请删除此问题。我已将其修复..$。每个（数据，函数（索引，项）{var li=“

”；div.append（li）；$（“#”+item.WIDGET_NAME+“\u li”）.append（“”；$.getJSON（'Home/GetWidgetDetails？widgetName=”+item.WIDGET_NAME），函数（数据）{ko.attach（item.WIDGET_NAME+“Title”），{Title:ko.observable（item.WIDGET_NAME+“Title”），myObsArray:ko.observatarray（data）}；}；}）；完全同意你的观点，非常感谢你的回复。修改代码如下。现在我得到了“uncaughterror：初始化可观察数组时传递的参数必须是数组、null或未定义”。嵌套的JSON调用是否存在问题？处理复杂对象数组并将其绑定到多个网格的最可靠方法是什么。它不允许我发布更新后的代码，所以又问了另一个问题：我实际上演示了在我发布的小提琴中制作一个复杂对象的

observearray

。您可以将对象定义为自己的viewModel，将JSON映射到该对象上，并使用THO数组填充

ObservalArray