Cómo vincular los elementos DOM existentes a KnockoutJS viewModel

Question

Estoy usando KnockoutJS para actualizar el DOM si se cambia un valor JS (Knockout nos da estas funciones).

Un defecto Knockout modelo de vista se ve algo como el siguiente bloque:

Javascript:

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

HTML:

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

Ahora, cuando los cambios de precios, la vista se actualiza automáticamente por Knockout .. Pero lo que me gustaría tener es lo siguiente:

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

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

Por lo tanto, deseo vincular un elemento DOM a mi viewModel. El atributo de precio en el modelo se inicializa con el valor 99.00. Cuando se cambia el precio (en Javascript), el valor DOM de #price también debe actualizarse.

Espero que la pregunta sea clara para ustedes.

¡Muchas gracias por su tiempo!

Answer 1

Su modelo de vista debe ser inicializado como sigue:

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

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

Después de que usted debe utilizar javascript para actualizar el modelo, no la vista. Así que en lugar de:

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

.. usted debe escribir ...

viewModel.price('some new value'); 

Este enfoque sería más acorde con el patrón MVVM.

Answer 2

Intente utilizar un dependiente observables

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

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

Esto actualizará cada vez que cambie el precio.