2012-07-25 48 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