2011-09-10 19 views
1

私はカスタムリストバインディングを作成しようとしています。これは私がこれまで何をしているされていますKnockout.js:カスタムバインドの配列パラメーター

var myArr = ko.observableArray(); 
myArr.push("foo"); 
myArr.push("bar"); 

var view = { 
    matches: myArr 
} 

ko.bindingHandlers.matchList = { 
     init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
      // gives me 0 
      console.log(valueAccessor().length); 
      // gives me 2 
      console.log(valueAccessor()().length); 

     }, 
    }; 

// Activates knockout.js 
ko.applyBindings(view); 

私のHTMLは次のようにルックスを結合:

<div data-bind="matchList: matches"></div> 

は、私は私の配列に取得するために、括弧の第二の対を使用しなければならないのはなぜ?

答えて

4

valueAccessorは、バインディングに渡されたものを返す関数です。関数にラップされているため、すぐには評価されません。

典型的なパターンは何をするだろう:

var value = ko.utils.unwrapObservable(valueAccessor()); 

ko.utils.unwrapObservableは安全に観測し、非観測の両方を処理し、値を返します。したがって、観測可能な場合は、yourValue()を返します。そうでない場合は、yourValueを返します。これにより、バインディングではオブザーバブルまたはプレーンプロパティのいずれかとのバインドをサポートできます。

さらに、バインディングの中には、オブザーバブル自体に対処する必要があり、バインディングによってはオブザーバブルの値に対処する必要があります。したがって、観測値はデフォルトではラップされません。したがって、valueAccessor()はあなたのオブザーバブル(関数)を返します。次に、値を取得するためにラップを解除するか、場合によっては値を設定するかどうかを決定するのはあなた次第です。

1

valueAccessorinitに渡したのは、updateに渡された同名のパラメータとは異なっていると思います。 initでは、配列を返す関数を返す関数です。このサンプルコードはdocumentationからチェックしてください。最後に、valueAccessor()が返す関数を示す2つのコンソールログを追加しました。

var myArr = ko.observableArray(); 
myArr.push("foo"); 
myArr.push("bar"); 

var view = { 
    matches: myArr 
} 

ko.bindingHandlers.matchList = { 
     init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); // Get the current value of the current property we're bound to 
      $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false 
      console.log(value); 
      console.log(valueAccessor().toString()); 
     } 
    }; 

// Activates knockout.js 
ko.applyBindings(view); 
関連する問題