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")

你可以认为它是一个吸气者和一个制定者。

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

首先：你从不使用带有敲除的内联事件处理程序。期。一切都是通过绑定完成的。

第二：你应该使用类作为视图模型，它会让你的生活更轻松。

＆＃13;

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) );

＆＃13;

<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>

＆＃13;

淘汰简单绑定不起作用

3 个答案: