淘汰賽採用的foreach

Question

這是我與knockout冷杉經驗渲染複選框。我無法找到如何使使用foreach複選框的列表。

我的嘗試：

<div class="col-sm-12" data-bind="foreach: placeCategories"> 
    <label class="col-sm-6" data-bind="text: name"> 
     <input type="checkbox" data-bind="value: val"> 
    </label> 
</div> 

但我得到的只有名，沒有複選框。可能標籤內部的html被覆蓋。但是如何顯示覆選框和文本呢？

Answer 1

從documentation：

的text綁定設置的內容與你的參數值的文本節點。以前的任何內容都將被覆蓋。

所以你需要使用text上span

<div class="col-sm-12" data-bind="foreach: placeCategories"> 
    <label class="col-sm-6"> 
     <span data-bind="text: name"></span> 
     <input type="checkbox" data-bind="value: val"> 
    </label> 
</div> 

在不同的元素如綁定或者你也可以使用無容器的語法：

<div class="col-sm-12" data-bind="foreach: placeCategories"> 
    <label class="col-sm-6"> 
     <!--ko text: name--><!--/ko--> 
     <input type="checkbox" data-bind="value: val"> 
    </label> 
</div> 

Answer 2

是的，你需要使用ko註釋標籤或多個子元素（例如跨度）以避免您的綁定相互覆蓋。

只是爲了好玩，你CAN覆蓋敲除text綁定，以允許這種行爲。下面的代碼將測試元素的含量爲data-bind屬性，並且如果發現任何，插入文本節點在元素的開始，同時保持其他綁定。

var app = { 
 
    placeCategories: [ 
 
    {name: ko.observable('A'), val: ko.observable(false)}, 
 
    {name: ko.observable('B'), val: ko.observable(false)}, 
 
    {name: ko.observable('C'), val: ko.observable(false)} 
 
    ] 
 
}; 
 

 
ko.bindingHandlers.text.update = function(element, valueAccessor) { 
 
    var hasBindings = element.innerHTML.match('data-bind'), 
 
     value = ko.utils.unwrapObservable(valueAccessor()); 
 
    
 
    if (hasBindings) { 
 
    if (element.firstChild.nodeType !== 3) 
 
     element.insertBefore(document.createTextNode(' '), element.firstChild); 
 
    element.firstChild.nodeValue = value; 
 
    } else 
 
    element.nodeValue = value; 
 
}; 
 

 
ko.applyBindings(app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div class="col-sm-12" data-bind="foreach: placeCategories"> 
 
    <label class="col-sm-6" data-bind="text: name"> 
 
     <input type="checkbox" data-bind="value: val"> 
 
    </label> 
 
</div>

注：我不鼓勵這樣做，但它是可能的。我寧願創建一個新的自定義綁定來允許它。