2012-03-01 17 views
9

Proszę spojrzeć na ten przykład. http://jsfiddle.net/LdeWK/2/Knockout JS - Jak poprawnie powiązać obserwowalną tablicę

Chcę wiedzieć, jak powiązać wartości tablicy obserwowalne. Znam ten problem w powyższym przykładzie, to ta linia

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

$ dane jest wartość rzeczywista, a nie obserwowalne funkcji, które normalnie wiążą. Wydaje się, że powinien to być całkiem prosty proces, ale nie mogę tego zrozumieć.

W innych przypadkach użyłem obserwowalnych tablic i miałem obserwowalny obiekt jako każdy element tablicy obserwowalnej. Chciałem wiedzieć, jak to zrobić, aby działał z właśnie obserwowalną tablicą.

Dzięki

Odpowiedz

17

Jeśli są wiążące odczytu/zapisu do pozycji w tablicy lub observableArray, wówczas będą musiały być własnością obiektu. W przeciwnym razie, $data będzie obserwowany jako nieopakowany i nie będzie sposobu, aby KO zapisało do rzeczywistego obserwowalnego obiektu.

Trzeba by zrobić coś takiego:

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"])); 

Oto przykład: http://jsfiddle.net/rniemeyer/LdeWK/3/

Poszczególne owoce nie koniecznie muszą być widoczne, chyba że trzeba swoje UI reagować na wartościach zmiany (twoja próbka nie musi reagować, ponieważ pokazujesz listę owoców tylko do odczytu).

+0

Wielkie dzięki za wyjaśnienie, że dla mnie – Sam

+1

kontynuacją - Co to jest poprawny sposób, aby wyświetlić długość w observableArray? biorąc swoje skrzypce za punkt wyjścia http://jsfiddle.net/wWDvW/ – BuddyJoe

+1

Musisz dostać się do podstawowej tablicy jak 'fruit(). length' –

0

tutaj jest mój siekać wokół:

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