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