knockout.js - Bootstrap 复选框和 knockout : custom binding does not work in templates

Question

在 Twitter Bootstrap 中，带有标签的复选框使用的标记如下:

<label class="checkbox">
    <input type="checkbox" value="option1">
    Option 1
</label>

标签的 knockout 标准“文本”绑定(bind)不起作用:复选框标记简单地替换为文本。我创建了一个自定义绑定(bind):

ko.bindingHandlers['checkboxLabelText'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if ((value === null) || (value === undefined))
            value = "";
        $(element).html($(element).html() + " " + _.escape(value));
    }
};

它与内联模板配合得很好，

<!-- This code works -->
<div class="accordion-inner">
    <!-- ko foreach:categories -->
    <div class="control-group">
        <div class="controls">
            <label class="checkbox" data-bind="checkboxLabelText: title">
                <input type="checkbox" data-bind="checked: checked" />
            </label>
        </div>
    </div>
    <!-- /ko -->
</div>

但不适用于命名模板:出现复选框但没有绑定(bind)。

<!-- This code does not work -->
<div class="accordion-inner" data-bind="template: {foreach: categories, name: 'checkboxEditorTemplate'}">
</div>
<script type="text/html" id="checkboxEditorTemplate">
    <div class="control-group">
        <div class="controls">
            <label class="checkbox" data-bind="checkboxLabelText: title">
                <input type="checkbox" data-bind="checked: $data.checked()" />
            </label>
        </div>
    </div>
</script>

有什么帮助吗？

Answer 1

正如您所发现的，text 绑定(bind)将用指定的文本替换其内容。就您而言，我认为更好的选择是将您的标记结构如下:

<label class="checkbox">
    <input type="checkbox" value="option1">
    <span data-bind="text: title"></span>
</label>

使用这种结构，您可以避免自定义绑定(bind)并获得相同的结果。 ​​​​​​​​​​​​​​​