javascript - 如何将现有的 DOM 元素绑定(bind)到 KnockoutJS viewModel

Question

如果 JS 值发生更改，我将使用 KnockoutJS 更新 DOM(Knockout 为我们提供了此功能)。

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

Javascript:

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

HTML:

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

现在，当价格发生变化时，Knockout 会自动更新 View 。但我想要的是以下内容:

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

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

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

我希望你们清楚这个问题。

非常感谢您的宝贵时间!

Answer 1

您的 View 模型应按如下方式初始化:

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

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

之后，您应该使用 javascript 来更新模型，而不是 View 。所以不是:

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

..你应该写...

viewModel.price('some new value');

这种方法更符合 MVVM 模式。