如何將現有DOM元素綁定到KnockoutJS viewModel

Question

如果更改了JS值，我正在使用KnockoutJS來更新DOM（Knockout為我們提供了這個功能）。

默認的Knockout viewModel類似於以下塊：

使用Javascript：

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

HTML：

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

現在價格發生變化時，Knockout會自動更新視圖。但我想要的是以下內容：

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

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

所以，我想將DOM元素綁定到我的viewModel。 模型中的price屬性初始化為值99.00。 當價格改變時（在Javascript中），＃price的DOM值也應該更新。

我希望你們這個問題很清楚。

非常感謝你的時間！

Answer 1

您的視圖模型應初始化如下：

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

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

之后你應該使用javascript來更新模型，而不是視圖。 所以代替：

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

..你應該寫...

viewModel.price('some new value');

這種方法更符合MVVM模式。

Answer 2

嘗試使用依賴的observable

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

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

每次更改價格時都會更新。