2

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

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

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

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>

但不适用于命名模板：复选框出现但没有绑定。

<!-- 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>

有什么帮助吗？

4

1 回答 1

3

如您所见，text绑定将用指定的文本替换其内容。在您的情况下，我觉得更好的选择是将您的标记构建为：

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

使用这种结构，您可以避免自定义绑定并达到相同的结果。​​​​​​​​​​​​​​​​​​​​</p>

于 2012-06-25T12:55:35.717 回答