1

私はノックアウト2.2.1を使用しています。対応する値をまとめて取得するために連結する 3 つのチェック ボックスのセットがあります。

<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }">
    <legend>Top Colours:</legend>
    <input type="checkbox" name="top-colours-red" data-bind="checked: topColoursRed" id="tc-check-1" />
    <label for="tc-check-1">Red stripes</label>
    <input type="checkbox" name="top-colours-blue" data-bind="checked: topColoursBlue" id="tc-check-2" />
    <label for="tc-check-2">Blue stripes</label>
    <input type="checkbox" name="top-colours-green" data-bind="checked: topColoursGreen" id="tc-check-3" />
    <label for="tc-check-3">Green stripes</label>
</fieldset>

結果は、たとえば、「赤のストライプ、青のストライプ」になります。私のビューモデルは次のとおりです。

function ColoursViewModel() {
    var self = this;
    self.template = "coloursView";
    self.topColoursRed = ko.observable(false);
    self.topColoursBlue = ko.observable(false);
    self.topColoursGreen = ko.observable(false);
    self.topColoursDescription = ko.observable("");
}

これを達成するためのカスタムバインディングはどのようになりますか? 私はそのようなことを試みます：

ko.bindingHandlers.topColoursLabel = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        ko.utils.unwrapObservable(valueAccessor());
        // ...
        var checkText = '...';
        viewModel.topColoursDescription(checkText);
    }
};

配列をカスタム バインディングに渡して 3 つのチェック ボックスの値をサブスクライブする方法を見つけることができません。

私には、次のような宣言のようです。

data-bind="topColoursLabel: { topColoursRed,topColoursBlue,topColoursGreen }"

これを達成するのは素晴らしいことですが、私はそれを行う正しい方法を探しています。

注：要素から他のプロパティを取得する必要があるため、ここでは計算されたオブザーバブルを使用できません-テキストのラベルを意味します-カスタムバインディングが必要です。

誰か助けてくれませんか？

更新された jsFiddle: http://jsfiddle.net/Sx87j/

4

1 に答える 1

1

実際、カスタム バインディング ハンドラは本当に必要なものではありません。チェックボックスの変更を追跡し、現在選択されているストライプを返すオブザーバブルself.coloursDescriptionとして実装する必要があります。computed

self.topColoursDescription = ko.computed(function(){
    var colors = [];
    if (self.topColoursRed())   colors.push('Red stripes');
    if (self.topColoursBlue())  colors.push('Blue stripes');
    if (self.topColoursGreen()) colors.push('Green stripes');
    return colors.join(', ');
});

また、マークアップからカスタム バインディングのすべてのトラックを削除すると、次のような結果が得られます: http://jsfiddle.net/h7Bmb/8/

アップデート

更新されたフィドルをトップカラーで動作させることができます。下の色でも機能させることは、現在のアプローチでは少し複雑に見えます。

バインディング内のすべてのリンクされたカラー オブザーバブルを列挙します。

<fieldset data-role="controlgroup" id="top-colours" data-bind="topColoursLabel: [ topColoursRed, topColoursBlue, topColoursGreen ]">

カスタム バインディング コード (ko.utils.unwrapObservableが呼び出される行) を変更します。

ko.utils.arrayForEach(valueAccessor(), ko.utils.unwrapObservable);

例: http://jsfiddle.net/Sx87j/1/

于 2013-04-27T07:09:11.860 に答える