Jak powiązać istniejące elementy DOM z obiektem KnockoutJS viewModel

Question

Używam KnockoutJS do aktualizacji DOM, jeśli zmieniono wartość JS (Knockout udostępnia nam te funkcje).

domyślny Knockout ViewModel wyglądać następnym wierszu:

javascript:

var viewModel = { 
    price: ko.observable(109) 
} 

HTML:

<span data-bind="text: price"></span> 

Teraz, gdy zmiany cen, widok jest automatycznie aktualizowana przez nokaut .. Ale chciałbym mieć następujące:

var viewModel = { 
    price: ko.observable(jQuery("#price")) 
} 

<span id="price">99.00</span> 

Tak więc, chcę powiązać element DOM z moim viewModel. Atrybut ceny w modelu zostaje zainicjowany wartością 99.00. Po zmianie ceny (w JavaScript) należy również zaktualizować wartość DOM #price.

Mam nadzieję, że pytanie jest dla was jasne.

Wielkie dzięki za poświęcony czas!

Answer 1

Państwa zdanie model powinien zostać zainicjowany w następujący sposób:

var viewModel = { 
    price: ko.observable(jQuery("#price").text()) 
} 

<span id="price" data-bind="text: price">99.00</span> 

Po tym okresie należy używać javascript do aktualizacji modelu, a nie widoku. Więc zamiast:

jQuery("#price").text('some new value'); 

.. powinno być pisanie ...

viewModel.price('some new value'); 

Takie podejście byłoby bardziej zgodne z wzorca MVVM.

Answer 2

Spróbuj użyć zależny obserwowalne

var viewModel = { 
    price: ko.observable(109) 
} 

viewModel.priceElement= ko.dependantObservable(function(){ 
    viewModel.price(); 
    return jQuery("#price"); 
}) 

To będzie aktualizować za każdym razem zmienić cenę.