淘汰赛简单绑定不起作用答案

【问题标题】：knockout simple binding not working淘汰赛简单绑定不起作用
【发布时间】：2015-11-06 17:47:39
【问题描述】：

我正在尝试一个将对象的属性绑定到 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”？

谢谢

【问题讨论】：

你的小提琴说 ko 没有定义。
我看了这个例子：jsfiddle.net/rniemeyer/lkqtu .. 似乎没有定义 ko 我确定我遗漏了一些东西，我如何在小提琴中定义 ko？
小提琴的问题似乎是当jsfiddle默认在https时，您使用http链接到源代码。
哇！ 15 分钟内三个大致相等的正确答案。
@CrimsonChris 谢谢。我有一个快速跟进：changeName 函数是否应该是 myViewModel 的一部分？我知道 myViewModel.personName 充当 Getter/Setter，但触发它的函数应该是 ViewModel 的一部分吗？

标签： javascript knockout.js binding jsfiddle

【解决方案1】：

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

【讨论】：

【解决方案2】：

首先：您从不将内联事件处理程序用于淘汰赛。时期。一切都是通过绑定完成的。

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

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>

【讨论】：

【解决方案3】：

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

【讨论】：

我根据你所说的改变了小提琴它仍然不起作用：jsfiddle.net/arendu/m14mohda/15
请看我更新的帖子。我也对你的 html 代码做了一些修改。我将点击处理程序附加到您的视图模型。