在淘汰赛 js 中使用可观察属性进行 UI 更新答案

【问题标题】：UI Updating using observable property in knockout js在淘汰赛 js 中使用可观察属性进行 UI 更新
【发布时间】：2015-06-29 14:32:49
【问题描述】：

我想在更改视图模型的可观察属性时更新 UI。

ViewModel 是：

 function UserViewModel() {
        var self = this;       
        self.name = ko.observable("Test User")
    }

在按钮点击时声明对象并更新可观察属性

 var userViewModel = {};
        $("#button").click(funtion(){
          userViewModel.name("Test");
        })

在视图模型上应用绑定

$(funtion(){
            userViewModel = new UserViewModel();
            ko.applyBindings(userViewModel); 
})

而视图是

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

或

<span data-bind="text:name()"></span>

谢谢，请推荐。

【问题讨论】：

为什么使用 jquery 进行点击？看来你正在覆盖你的viewmodel...首先你写var userViewModel = {};然后userViewModel = new UserViewModel();然后这覆盖你原来的viewmodel但是点击处理程序仍然会引用旧的var userViewModel = {};...
我声明了变量var userViewModel = {};，以便为视图模型调用一次applybindings。
谢谢@nemesv！它提供了一种解决我的问题的方法。好提示+1

标签： javascript jquery knockout.js

【解决方案1】：

你在正确的轨道上，但我建议使用敲除绑定来处理点击，而不是使用 jQuery。

function UserViewModel() {
    var self = this;
    self.name = ko.observable("Test User");
    self.update = function() {
        self.name("Test");
    };    
}

ko.applyBindings(new UserViewModel());


<span data-bind="text:name"></span>
<button data-bind="click: update">Update</button>

这是fiddle

【讨论】：

感谢您的回复，但我想通过 JavaScript 使用动态值更新模型。
没有什么能阻止你这样做。 Knockout 旨在使从 JavaScript 更新视图模型值变得容易：这是它的主要用例。如果您有具体问题，请提出。我只是重新使用了您发布的代码；如果这不是正确的代码，你为什么要使用它？