☰

カスタムノックアウトバインディングのinitとupdateの間で状態を保存する推奨される方法は何ですか? 質問する

tag-icon • tag-icon knockout.js
カスタムノックアウトバインディングのinitとupdateの間で状態を保存する推奨される方法は何ですか? 質問する

現在、dom 要素の jQuery データを使用して状態を保存しています。

ko.bindingHandlers.customValue = {

    init: function init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var state = { isEditing: false };        
        $(element).focus(function focus() {
            state.isEditing = true;
        }).blur(function blur() {
            state.isEditing = false;            
        }).data("customBinding", state);

    },

    update: function update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // ignore if updating
        if (!$(element).data("customBinding").isEditing) {
            // handle update if they are not updating                                
        }
    }

};​

DOM を必要とせず、バインディングごとに状態を保存するのに適した場所はありますか? bindingContext を使用して、バインディングの各インスタンスの状態を保存できますか?

ベストアンサー1

はbindingContext可能ですが、バインディングが最初にトリガーされたときに から にデータを渡す場合のみです。 が次に起動されるときには、initバインディングは存在しなくなります。updateupdate

このタイプの状態を保存する場所には、実際には 2 つの選択肢があります。

1- 要素上で、あなたが述べたように。$.dataこれを行うには、jQuery または KO include API を使用することko.utils.domData.get(element, key)もできますko.utils.domData.set(element, key, value)。

2- 適切な場合は、このタイプの情報をビュー モデルに配置します。フラグは、isEditingビュー モデルでは必ずしも場違いではありません。個人的には、このタイプの「メタデータ」を、次のように、オブザーバブルのサブオブザーバブルとして配置するのが好きです。

var name = ko.observable("Bob");
name.isEditing = ko.observable(false);

nameおよびに対してバインドできるようになりますname.isEditing。

これにはいくつかの利点があります:

  • 新しいトップレベルのプロパティを導入しないので、ビューモデルをかなりクリーンに保つことができます。
  • サブオブザーバブルをその親オブザーバブルに結び付けたままにします（nameIsEditingなどは必要ありません）
  • ko.toJSONサブオブザーバブルのようなものを JSON に変換すると、isEditing親がラップ解除されたときにサブオブザーバブルは単純に削除されます。そのため、不要な値がサーバーに返されることはありません。
  • この場合、ビュー モデル内の他の計算に使用したり、UI 内の複数の要素にバインドしたりできるという利点もあります。

おすすめ記事