2016-11-25 140 views
0

我有對象模型它低於格式的,淘汰賽JS:foreachBinding

models: 
    [ 
     0: { 
     [functions]: , 
     __proto__: { }, 
     Main: "Sample", 
     sub: [ 
      0: " Sub1", 
      1: " Sub2", 
      2: " sub3", 
      3: " sub4", 
      4: " sub5", 
      5: " sub6", 
      6: " sub7", 
      7: " sub8", 
      length: 8 
     ] 
     }, 
     1: { }, 
     2: { }, 

我已列出的對象作爲樣品的前三個元素。第一個元素也被詳細闡述。我正在試圖列出如下。

Main 1 
sub details 
Main 2 
sub details 

我試過了,我想不出爲什麼我的數據綁定不起作用。以下代碼不在屏幕上顯示任何內容。

  <td> 
       <ul class="tree"> 
        <li data-bind="foreach: models" > 
         <span data-bind="text: $data[$index].main"></span> 
         <ul data-bind="foreach: subDetails in models.sub"> 
          <li><span data-bind="text: $data[$index].sub"></span></li> 
         </ul> 
        </li> 
       </ul> 
      </td> 

請檢查我的fiddle在這裏。任何幫助,將不勝感激。

回答

1

你的fiddle有很多問題。這裏是一個名單 -

  • 你已經寫ko.applybindigs應該已經ko.applyBindings

  • model應該是你的視圖模型的一部分,所以你需要將變量連接到您的視圖模型。像var self = this; self.model = []...。聲明它只是一個私人的var將不會暴露給淘汰賽的綁定,因此這是行不通的。

  • 一旦進入foreach綁定,您不需要$index來訪問數組內的對象,只需通過它們的名稱訪問它們即可。所以<span data-bind="text: $data[$index].Main"></span><span data-bind="text: Main"></span>

  • 代替你有另一個foreach嵌套在外部一個內部的,也有已經使用$index訪問這確實是沒有必要的。要添加到<ul data-bind="foreach: subdetails in model.sub">可以很容易地更換<ul data-bind="foreach: Sub">(請還會注意到在sub錯字應該已經Sub

更正小提琴here

+0

你不能不提到通過'var'宣佈裏面的東西viewmodel將無法在視圖中訪問。相反,它必須附加到'this'。 – connexo

+0

我已經覆蓋在小提琴....仍然我更新了答案...感謝指出...... .. :) – gkb