2012-03-01 5 views
9

この例を見てください。 http://jsfiddle.net/LdeWK/2/ノックアウトJS - observableArrayを正しくバインドする方法

観測可能な配列の値をバインドする方法を知りたいと思います。私はそれが

<p>Editing Fruit: <input data-bind="value: $data" /></p> 

$データは実際の値ではなく、あなたが正常に結合する観測可能な機能であるこの行で、上記の例では、問題を知っています。 これはかなり単純なプロセスであるはずですが、私はそれを理解できません。

他のケースでは、観測可能な配列を使用し、観測可能な配列の各要素として観測可能なオブジェクトを持っていました。私はこれをちょうど観測可能な配列で動作させる方法を知りたがっていました。

おかげ

答えて

17

を使用すると、配列やobservableArray内の項目への書き込み/読み取りを結合している場合は、それらはオブジェクトのプロパティである必要があります。さもなければ、$dataはアンラップされたオブザーバブルとなり、KOが実際のオブザーバブルに書き込む方法はありません。あなたが好きな何かをしなければならないでしょう

:ここ

var ViewModel = function(myFruit) { 
    var observableFruit = ko.utils.arrayMap(myFruit, function(fruit) { 
     return { name: ko.observable(fruit) }; 
    }); 
    this.fruit = ko.observableArray(observableFruit); 
}; 


ko.applyBindings(new ViewModel(["Apple", "banana", "orange"])); 

はサンプルです:あなたが値に反応するように、あなたのUIを必要としない限り、http://jsfiddle.net/rniemeyer/LdeWK/3/

個々の果実は、必ずしも、観測可能である必要はありません。あなたは果物の読み取り専用リストを表示しているので、あなたのサンプルは反応する必要があります。

ここ
+0

グレート、その私のため – Sam

+1

Aを明確にするためのおかげでフォローアップ - observableArrayの長さを表示するための正しい方法は何ですか?あなたのフィドルを出発点としてhttp://jsfiddle.net/wWDvW/ – BuddyJoe

+1

'fruit()。length'のような基本的な配列にアクセスする必要があります –

0

は周りの私のハックです:

<!-- ko foreach: list().map(observable => ({ value: observable })) --> 
    <input type="text" data-bind="value: value"> 
<!-- /ko -->