web-dev-qa-db-ja.com

Knockoutjsで計算された引き渡しパラメーター

ノックアウトjsでバインド時に引数を渡すことが可能かどうか疑問に思っています。

チェックボックスのリストをバインドしていますが、ビューモデルで計算された単一のオブザーバブルにバインドしたいと思います。私のビューモデルでは（読み取り関数に渡されたパラメーターに基づいて）特定の条件に基づいてtrue/falseを返したいです。

var myViewModel=function(){
    this.myprop=ko.computed({read: function(){
    //would like to receive an argument here to do my logic and return based on argument.
}
});
};

<input type="checkbox" data-bind="checked: myprop(someval1)" />
<input type="checkbox" data-bind="checked: myprop(someval2)" />
<input type="checkbox" data-bind="checked: myprop(someval3)" />

助言がありますか？

javascriptbindingknockout.jsobservable
42
Qaiser Iftikhar

計算されたオブザーバブルを返すことが唯一の目的である関数を作成します。必要に応じてパラメーターを受け取ることができます。双方向バインディングにする場合は、別個の計算されたオブザーバブルにする必要があります。

次に、バインディングで、適切な引数を使用してその関数を呼び出します。計算されたオブザーバブルは、ビューでバインドされ、通常どおり更新されます。

ここに フィドル があり、イベントハンドラーを作成するためにこの手法を使用しました。ここでも同様のことができます。

関数をオブザーバブルのメソッドにすることで、きれいに保つことができます。 ko.observable.fnプロトタイプに追加するか、監視可能なインスタンスに直接追加します。

ko.observable.fn.bit = function (bit) {
    return ko.computed({
        read: function () {
            return !!(this() & bit);
        },
        write: function (checked) {
            if (checked)
                this(this() | bit);
            else
                this(this() & ~bit);
        }
    }, this);
};
// or
function ViewModel() {
    this.flags = ko.observable(0);

    this.flags.bit = function (bit) {
        return ko.computed({
            read: function () {
                return !!(this() & bit);
            },
            write: function (checked) {
                if (checked)
                    this(this() | bit);
                else
                    this(this() & ~bit);
            }
        }, this);
    }.bind(this.flags);
}

次に、ビューに適用します

<input type="checkbox" data-bind="checked: flags.bit(0x1)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x2)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x4)"/>
<input type="checkbox" data-bind="checked: flags.bit(0x8)"/>

デモ

ただし、これらすべてのチェックボックスをビューモデル内の単一の値にバインドしようとしている場合は、それを行う必要はありません。ビューモデルの配列でcheckedバインディングを使用し、チェックボックスに値を指定します。チェックされたすべての値が配列に追加されます。そして、それは双方向のバインディングになります。

<input type="checkbox" data-bind="checked: checkedValues, value: 1"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 2"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 3"/>
<input type="checkbox" data-bind="checked: checkedValues, value: 4"/>

var viewModel = {
    checkedValues: ko.observableArray([])
};

デモ

84
Jeff Mercado

受け入れられる答えはまともですが、チェックボックスごとにko.computedを生成する関数がある場合、複数の匿名計算オブザーバブルで不要なオーバーヘッドが追加されます。

これはビット単位のシナリオのより単純な実装ですが、計算される関数は必要なものであれば何でもかまいません。

<input type="checkbox" data-bind="checked: checkedList, value: 1" />
<label>Value 1</label>
<input type="checkbox" data-bind="checked: checkedList, value: 2" />
<label>Value 2</label>
<input type="checkbox" data-bind="checked: checkedList, value: 4" />
<label>Value 4</label>
<input type="checkbox" data-bind="checked: checkedList, value: 8" />
<label>Value 8</label>

スクリプト：

var vm = function() {
    var vm = this;

    this.checkedList = ko.observableArray();
    this.bitwiseValue = ko.computed({
        read: function () {
            return vm.checkedList().reduce(function (prev, curr) {
                return prev | curr;
            }, 0);
        },
        write: function (myVal) {
            vm.checkedList.removeAll();
            var placeValue = 1;

            while(myVal > 0) {
                if((myVal % 2) == 1) {
                    alert(placeValue);
                    vm.checkedList.Push(placeValue.toString());
                }

                myVal = myVal >>> 1;                    
                placeValue = placeValue * 2;
            }
        }
    }, this);
}

ko.applyBindings(vm);

ここでのフィドルの例： http://jsfiddle.net/i_vargas3/RYQgg/

6
Isaac

computed値を使用する理由はありません。ビューモデルで関数を定義し、checkedをバインドするだけです。

以下は非常に単純な例です。

-

HTML

<input type="checkbox" data-bind="checked: isEven(1)" />
<input type="checkbox" data-bind="checked: isEven(2)" />
<input type="checkbox" data-bind="checked: isEven(3)" />​

JS

var MyViewModel=function(){
    this.isEven = function(num) {
        return (num % 2) == 0;
    };
};
ko.applyBindings(new MyViewModel());

-

とはいえ、できるだけ多くのロジックをビューモデルにプッシュしてみることをお勧めします。チェックボックスをオブジェクトとしてモデル化するビューモデルを作成し、チェックボックスをチェックするかどうかのロジックを内部にカプセル化することをお勧めします。

-

編集：双方向バインディングを行うための要件に基づいて、オブザーバブルを管理するエクステンダーを作成しました。

http://jsfiddle.net/jearles/j6zLW/5/

ko.extenders.bitwise = function(target, bitCount) { 
    target.bits = [];    
    target.checked = ko.observableArray();

    // Create bit array based on requested number of bits
    for (i=bitCount-1; i>=0; i--) {
        target.bits.Push(''+Math.pow(2, i));
    }        

    // Define a function to create bits
    function makeBits(newValue) {
       var num = !isNaN(newValue) ? parseInt(newValue) : 0;
       var arr = [];
       for (i=0; i<target.bits.length; i++) {
          var bitValue = parseInt(target.bits[i]);
          if ((num & bitValue) == bitValue) arr.Push(target.bits[i]);
       }
       target.checked(arr);
    }

    // Define a function to combine bits
    function makeBitwise(newBits) {
       var num = 0;
       for (i=0; i<target.bits.length; i++) {
         if (newBits.indexOf(target.bits[i]) > -1) num += parseInt(target.bits[i]);
       }
       target(num);
    }

    // Create initial bits
    makeBits(target());

    // Make bits whenever the value changes
    target.subscribe(makeBits);

    // Make number whenever the bits change
    target.checked.subscribe(makeBitwise);

    // Return the original observable
    return target;
};

var MyViewModel=function(){
    var self = this;
    this.number = ko.observable(2).extend({ bitwise: 8});

};
ko.applyBindings(new MyViewModel());​
3
John Earles

詳細を知ることなく、あなたがやるべきことはko.observableArrayまたは計算された配列値を定義しているようです

HTML：

myprop: <input data-bind="value: myprop">
<div data-bind="foreach: selections">
  <label>
    <span data-bind="text: value"></span>
    <input type="checkbox" data-bind="checked: selected"/>
  </label>
</div>

JS：

  $(function() {
    function Model() {
        this.self = this
        self.myprop = ko.observable(14)
        self.bits = [1, 2, 4, 8, 16, 32, 64, 128]
        self.selections = ko.computed(function() {
            return self.bits.map(function(bit) {
                console.log(myprop() & bit)
                return {
                    value: bit,
                    selected: (myprop() & bit) == bit
                }
            })
        })
    }

    ko.applyBindings(new Model())
})

モデルの状態を定義するためにマークアップから値を渡さない

0
7zark7