敲除简单绑定不起作用

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 是一个可观察的。当我们想要获取 observable 的值时，我们简单地将其作为函数调用

 myViewModel.personName()

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

 myViewModel.personName("Bar")

您可以将其视为 getter 和 setter。

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

您的代码存在一些问题。主要问题在于您尝试设置可观察对象的方式。应将 Observable 用作 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>

敲除简单绑定不起作用

knockout simple binding not working

javascript

binding

jsfiddle

knockout.js