如何将现有DOM元素绑定到KnockoutJS viewModel

Nic*_*een 6 javascript jquery knockout.js

如果更改了JS值,我正在使用KnockoutJS来更新DOM(Knockout为我们提供了这个功能).

默认的Knockout viewModel类似于以下块:

使用Javascript:

var viewModel = {
    price: ko.observable(109)
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<span data-bind="text: price"></span>
Run Code Online (Sandbox Code Playgroud)

现在价格发生变化时,Knockout会自动更新视图.但我想要的是以下内容:

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

<span id="price">99.00</span>
Run Code Online (Sandbox Code Playgroud)

所以,我想将DOM元素绑定到我的viewModel.模型中的price属性初始化为值99.00.当价格改变时(在Javascript中),#price的DOM值也应该更新.

我希望你们这个问题很清楚.

非常感谢你的时间!

Mar*_*son 6

您的视图模型应初始化如下:

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

<span id="price" data-bind="text: price">99.00</span> 
Run Code Online (Sandbox Code Playgroud)

之后你应该使用javascript来更新模型,而不是视图.所以代替:

jQuery("#price").text('some new value');
Run Code Online (Sandbox Code Playgroud)

..你应该写...

viewModel.price('some new value');
Run Code Online (Sandbox Code Playgroud)

这种方法更符合MVVM模式.