17

私はついに、新しいMVC4アプリケーションを構築しながらKnockoutJSの学習を開始する時間を見つけました。ビューにすでに設定されているデフォルト値から監視可能な値を初期化するための最良の方法を見つけようとしています。

これは不自然な例ですが、次のように、オブザーバブルのデフォルト値をビューに直接レンダリングしたいと思います。

<input type="hidden" 
       value="@Model.SomeValue"
       data-bind="value: myObservableReference"/>

デフォルト値は通常、次の方法で初期化されることを知っています。

model.myObservableReference = ko.obervable("SomeValue");

ただし、次のように初期化を拡張する方法を見つけたいと思います。

model.myObservableReference = ko.obervable();

値が存在する場合、バインディングから既存の値を読み取ります。

これまでのところ、KnockoutJSコードがかみそりの世界を完全に認識しないように管理しているので、次のようなだらしなさを避けたいと思います。

model.myObservableReference = ko.obervable(@Model.SomeValue);

これはエクステンダーかカスタムバインダーのどちらかで処理できると思いますが、誰かが私を正しい方向に向けてくれれば幸いです。

4

2 に答える 2

21

これを実現するために、独自のカスタムバインディングハンドラーを作成してみてください。

ko.bindingHandlers.initializeValue = {
    init: function(element, valueAccessor) {
        valueAccessor()(element.getAttribute('value'));
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('value', ko.utils.unwrapObservable(value))
    }
};

<input type="hidden" value="@Model.SomeValue"
       data-bind="initializeValue:myObservableReference, value: myObservableReference"/>
于 2012-07-22T01:16:18.640 に答える
1

あなたがそこにいるグーグルのために、ここにinitializeValueバインディングを選択ボックスと入力ボックスに拡張するコードがあります

ko.bindingHandlers.initializeValue = {
    init: function(element, valueAccessor) {
        if (element.getAttribute('value')) {
            valueAccessor()(element.getAttribute('value'));
        } else if (element.tagName === 'SELECT') {
            valueAccessor()(element.options[element.selectedIndex].value);
        }
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor();
        element.setAttribute('value', ko.utils.unwrapObservable(value));
    }
}

注：initializeValueバインディングは、selectのdata-bind属性の値バインディングの前に表示される必要があります。そうでない場合は機能しません。

<select data-bind='initializeValue: layout_id, value: layout_id, options: layouts, optionsText: "text", optionsValue: "id"'></select>
于 2014-09-26T15:50:43.600 に答える