剔除簡單綁定不起作用

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>