使用 foreach 淘汰渲染复选框答案

【问题标题】：Knockout render checkboxes using foreach使用 foreach 淘汰渲染复选框
【发布时间】：2015-11-15 23:08:33
【问题描述】：

这是我第一次使用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 被覆盖。但是如何同时显示复选框和文本呢？

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案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>

【讨论】：

感谢您对 ko 评论的帮助。

【解决方案2】：

是的，您需要使用 ko 注释标签或多个子元素（例如跨度）以避免您的绑定相互覆盖。

只是为了好玩，您可以覆盖 Knockout 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>

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

【讨论】：

很高兴知道我可以覆盖绑定，但这对于我的特殊任务来说太复杂了。
@Edgar，NP 我知道，这只是我想调查的好奇心 :)