2012-07-25 38 views
1

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

我有两个控制器(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); 
       });   
    } 

感谢, 沙市

回答

1

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

其次,你的问题是你正在覆盖你的视图模型。这一点在这里:

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

第一次调用它,它会创建你的viewmodel。第二次+它覆盖你的视图模型。此外,编程创建您的HTML是不必要的。基因敲除更适合与foreach绑定的任务。你似乎错过了很多淘汰赛应该是的,所以我会鼓励你通过the tutorials,如果你还没有这样做的话。最后,你的HTML将会失效。您正在li节点没有olul把他们在。

这里是一个MVVM解决您的问题,in a fiddle。它被简化以演示绑定概念,并且不使用koGrid

+0

完全同意你的看法,并且非常感谢你的回复。 修改代码如下。现在我得到“未捕获的错误:初始化可观察数组时传递的参数必须是一个数组,或者为空或未定义”。 它是嵌套的JSON调用一个问题?什么是处理复杂对象的数组并将它们绑定到多个网格的最可靠的方法。 它不让我发布更新的代码,所以问了另一个qustion与细节:http://stackoverflow.com/questions/11657827/kogrid-json-dynamic-widgets-with-nested-server-calls – sgireddy 2012-07-25 20:10:28

+0

我实际上展示制作我发布的小提琴中的复杂对象的'observableArray'。你可以将对象定义为自己的viewModel,将你的JSON映射到它上面,并用这些对象的数组填充你的'observableArray'。我不知道为什么它不会让你编辑自己的问题。 – Tyrsius 2012-07-25 20:28:23

+0

如果这解决了这个问题的问题,请接受它。如果您认为它没有,并且只会使用您的新问题,请删除此问题。 – Tyrsius 2012-07-25 20:34:30