如何将现有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");
})

每次更改价格时都会更新。