knockoutjs表內嵌模板問題

我減少了我的實際代碼，但我無法完成這項工作。我正在使用knockoutjs和bootstrap與聯機敲除模板。我只是把一堆輸入放在一個div裏面，但爲了對齊的原因，我把它改成了表格。我知道屬性名稱是正確的，並且javascript控制檯根本不顯示任何錯誤的變量或綁定問題。我將這些foreach放在TR標籤中，而不是TBODY標籤，因爲我不知道每次都會有多少個複選框，我不希望它們在行中完全一致，只有一個TR元素和一堆TD單元那一個TR標籤現在。我怎樣才能做到這一點？knockoutjs表內嵌模板問題

<div id="Counties" class="well well-large checkbox inline"> 
    <table class="table table-condensed"> 
       <tbody> 
        <tr data-bind="foreach: { data: counties 
              }"> 
         <td><input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name 
         </td> 
        </tr> 
       </tbody> 
      </table> 
</div>

這裏是我的ViewModels：

function searchVm() { 
    var self = this; 
    self.counties = ko.observableArray([]); //array of jurisItem 
} 

function jurisItem(name, sid) { 
    var self = this; 
    self.name = name; 
    self.sid = sid; 
}

編輯：

我也試過此基礎上knockoutjs文檔和它不工作。我知道我可以使用jQuery以其他方式做到這一點，但我寧願淘汰賽的模板語法...

<table class="table table-condensed"> 
      <tbody> 
       <tr> 
        <!-- ko foreach: $root.counties --> 
        <td> 
         <input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name 
        </td> 
        <!-- /ko --> 
       </tr> 
      </tbody> 
     </table>

來源

2013-01-23 kyleb

你能更具體，明確你是什麼意思上沒有按」工作？ – nemesv

它不顯示我正在渲染的項目。但是我發現其他的東西也可能會發生變化，因爲我從這個DIV中拿出了所有的bootstrap和knockout東西，只是增加了一個測試測試單元，它顯示並隱藏它，所以我需要找到它爲什麼是這樣做。 – kyleb

我不知道你有什麼做的。我做了一些示例。

HTML：

<div id="Counties" class="well well-large checkbox inline"> 
    <table class="table table-condensed"> 
     <tbody> 
      <tr data-bind="foreach: counties"> 
       <td> 
       <input type="checkbox" data-bind="attr: { value: sid }" /> 
       <span data-bind="text: name" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>

的javascript：

$(function() { 
    var SearchVm = function() { 
     var self = this; 
     self.counties = ko.observableArray([]); 
    }; 

    var JurisItem = function (name, sid) { 
     var self = this; 
     self.name = name; 
     self.sid = sid; 
    } 

    var item1 = new JurisItem("TestName1", "TestSid1"); 
    var item2 = new JurisItem("TestName2", "TestSid2"); 

    var searchViewModel = new SearchVm(); 
    searchViewModel.counties.push(item1); 
    searchViewModel.counties.push(item2); 
    ko.applyBindings(searchViewModel); 

})

這是否對你的工作：

http://jsfiddle.net/PVMjy/41/

來源

2013-01-23 20:16:42 Mdb

是的它的工作原理，我會標記你有正確的答案，但它不工作的真正原因是因爲我清理了我的主DIV元素，當我應該清除表節點時，將observableArray設置爲新的一組值。糟糕:) – kyleb

knockoutjs表內嵌模板問題

回答

相關問題