24

KO v2.1.0 を使用してブール値を select 要素にバインドしたいのですが、明らかに期待どおりに動作しません。

HTML コード:

<select data-bind="value: state">
    <option value="true">On</option>
    <option value="false">Off</option>
</select>

JavaScript コード:

var model = {
    state: ko.observable(false)
};

ko.applyBindings(model)

したがって、選択ボックスは初期値で「オフ」の位置になると思いますfalseが、「オン」でした。私が状態を置くko.observable("false")と、それは正しいでしょうが、それは私が望んでいたことではありません. ブーリアン値をKOで選択ボックスにバインドする方法を知っている人はいますか?

Jsfiddle: https://jsfiddle.net/greenlaw110/Ajm58/

4

4 に答える 4

38

これは、このフォーラムの投稿からこのオプションについて検討したオプションです。

ko.bindingHandlers.booleanValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var observable = valueAccessor(),
            interceptor = ko.computed({
                read: function() {
                    return observable().toString();
                },
                write: function(newValue) {
                    observable(newValue === "true");
                }                   
            });
        
        ko.applyBindingsToNode(element, { value: interceptor });
    }
};

そのため、カスタムバインディングを使用して、UIとビューモデルの間に書き込み可能な計算されたオブザーバブルを挿入します。これは、ビューモデルで直接実行する代わりの方法です。

こちらのサンプル:https ://jsfiddle.net/rniemeyer/H4gpe/

于 2012-05-10T13:32:43.757 に答える
8

これは、選択がどの段階でもブール値ではなく文字列で機能しているために発生します。代わりに ko.computed( ... ) 値を試してください。

詳細はこちら:https ://jsfiddle.net/Ajm58/3/

<select id="testSelect" data-bind="value: stateString">
    <option value="true">true</option>
    <option value="false">false</option>
</select>
​

var model = {
    state: ko.observable(false)
};

model.stateString = ko.computed({
    read: function() { return (this.state() ? "true" : "false"); },
    write: function(value) { this.state(value == "true"); }
}, model);

ko.applyBindings(model);


setTimeout(function() {
    model.state(true);    
}, 1500);

setTimeout(function() {
    $("#testSelect").val("false");
}, 3000);
于 2012-05-09T06:50:16.157 に答える
3

答えが得られたと思います。それぞれオプション値に数字「1」と「0」を入れます。

<select data-bind="value: state">
    <option value="1">On</option>
    <option value="0">Off</option>
</select>

https://jsfiddle.net/greenlaw110/Ajm58/2/を参照

于 2012-05-09T06:38:46.077 に答える