2014-04-14 79 views
0

我無法使knockoutjs檢查綁定正常工作。不知道我是否做錯了什麼或什麼。我有這一塊的HTMLknockoutjs和複選框檢查綁定

<ul data-bind="foreach: ListItems" > 
         <li style="padding-left: 0px; margin-left: 0px; color: white; font-size: 12px;"> 
          <div class="title" style="margin-right: 3em; line-height: 20px;"> 
           <input type="checkbox" data-bind="checked: IsActive" /> 

           <label data-bind="text: Quantity, disable: IsActive"</label> 
           <label data-bind="text: Description, disable: IsActive" ></label> 

          </div> 
         </li> 
        </ul> 

,我想一個複選框,允許用戶通過點擊它要麼刪除線的文本或灰色出來什麼的複選框來標記關閉此列表項。

我的視圖模型是通過獲取以下json數據格式創建的。

{"$id":"1","Description":"New List","Categories": 
[{"$id":"2","Description":"Bread/Bakery","ListItems":  
[{"$id":"3","IsActive":1,"Description":"Bread","Quantity":"1 Loaf"}]}, 
{"$id":"4","Description":"Beverages","ListItems": 
[{"$id":"5","IsActive":1,"Description":"Coke","Quantity":"1 Case"}, 

所以問題是檢查複選框實際上並沒有做任何事情。它應該禁用其他標籤,但它不會。我的所有其他值都正確顯示,如果我做了一個數據綁定=文本:IsActive我可以看到值應該改變複選框,但它永遠不會改變。

編輯:遵循以下建議:

var mydata = ko.observableArray([ 
      { 
       Categories: ko.observableArray([ 
         { 
          Description: "Dairy", ListItems: ko.observableArray([ 
          { Description: "Eggs", Quantity: "1 Dz.", IsActive: ko.observable(false) }, 
          { Description: "Milk", Quantity: "1 Gallon", IsActive: ko.observable(false) } 
          ]) 
         }, 
         { 
          Description: "Produce", ListItems: ko.observableArray([ 
           { Description: "Lettuce", Quantity: "1 Head", IsActive: ko.observable(false) }, 
           { Description: "Oranges", Quantity: "5 ea.", IsActive: ko.observable(false) }, 
           { Description: "Greenbeans", Quantity: "1 Thingy", IsActive: ko.observable(false) }, 
          ]) 
         }, 
       ]) 
      } 
    ]); 
+1

你能更具體的問題是什麼?列表項是否正確顯示,複選框未被選中/取消選中還是其他內容? – rfernandes

+0

opps。好吧,編輯並添加到底部。我不能相信我忘了最重要的部分。 –

回答

2

您遇到的問題是,因爲你的數據是一個普通的JSON對象,這將坐上開往只有一次。

爲了得到你所尋找的雙向綁定行爲,你的對象必須是「可觀」,因此,例如:

var mydata = ko.observable({ 
    Categories: ko.observableArray([ 
     { IsActive: ko.observable(true) } 
    ]) 
}); 

注意,它是由你來決定哪些在你的結構要求的項目是可觀察的;這將取決於您希望綁定行爲的方式。

+0

我遵循了您的指示,請參閱上面的修改。仍然不禁用後面的標籤。 –

+0

哦,你不能禁用標籤...雖然可以禁用輸入。 –