剔除简单绑定不起作用

Question

我正在尝试将对象的属性绑定到UI的简单示例。

我的示例在这里http://jsfiddle.net/arendu/m14mohda/17/

我有以下HTML：

The name is <span data-bind="text: personName"></span>
<button type="button" onlick="changeName()">Click Me!</button>

和以下js脚本：

var myViewModel = {
    personName: ko.observable('Foo'),
    personAge: ko.observable(123)
};

var changeName = function () {
    myViewModel.personName("Bar")
}
ko.applyBindings(myViewModel);

我的问题是为什么单击按钮时显示的名称不会从“ Foo”更改为“ Bar”？

谢谢

Answer 1

此myViewModel.personName = 'Bar'不起作用，因为personName是可观察的。 当我们想要获得可观察值时，我们简单地将其称为函数

 myViewModel.personName()

同时，当我们想要设置它的值时，我们像上面一样调用它，但是将值作为参数传递。

 myViewModel.personName("Bar")

您可以将其视为吸气剂和吸气剂。

 var myViewModel = { personName: ko.observable('Foo'), personAge: ko.observable(123) }; myViewModel.changeName = function () { myViewModel.personName('Bar'); } ko.applyBindings(myViewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> The name is <span data-bind="text: personName"></span> <button type="button" data-bind="click: changeName">Click Me!</button> 

Answer 2

您的代码有一些问题。 主要问题在于您尝试设置可观察对象的方式。 Observables应该用作getter / setter函数。

http://jsfiddle.net/m14mohda/16/

The name is <span data-bind="text: personName"></span>
<button type="button" data-bind="click: changeName">Click Me!</button>

var myViewModel = {
    personName: ko.observable('Foo'),
    personAge: ko.observable(123)
};

myViewModel.changeName = function() {
    var newName = myViewModel.personName() === 'Foo' ? 'Bar' : 'Foo';
    myViewModel.personName(newName);
}
ko.applyBindings(myViewModel);

Answer 3

第一： 切勿将内联事件处理程序与剔除一起使用。 期。 一切都是通过绑定完成的。

第二：您应该将类用作视图模型，这将使​​您的生活更轻松。

 function Person(name, age) { this.name = ko.observable(name), this.age = ko.observable(age) } Person.prototype.changeName = function () { this.name('Bar'); }; ko.applyBindings( new Person('Foo', 123) ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> The name is <span data-bind="text: name"></span> <button data-bind="click: changeName">Click Me!</button>