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

【问题标题】：How to bind existing DOM elements to a KnockoutJS viewModel如何将现有的 DOM 元素绑定到 KnockoutJS viewModel
【发布时间】：2011-10-03 15:37:12
【问题描述】：

如果 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。模型中的价格属性初始化为值 99.00。当价格改变时（在 Javascript 中），#price 的 DOM 值也应该更新。

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

非常感谢您的宝贵时间！

【问题讨论】：

如果我理解正确，没有。您仍然需要使用data-bind inline。

标签： javascript jquery knockout.js

【解决方案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 模式。

【讨论】：

【解决方案2】：

尝试使用依赖的可观察对象

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

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

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

【讨论】：