淘汰赛采用的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>

注：我不鼓励这样做，但它是可能的。我宁愿创建一个新的自定义绑定来允许它。