KnockoutJS - 數據綁定在按鈕點擊后不會改變文本

Question

我一直在努力與敲除數據綁定幾天。 我掙扎的簡單但非常討厭的問題的例子如下。

我有一個簡單的ViewModel類，其方法將布爾值從false更改為true。 Knockout在頁面加載時與HTML綁定，但是在click事件上數據綁定似乎存在問題。

調試代碼時，Observable確實會發生變化，但View保持不變。

整個代碼和（不）工作示例如下。

 function ViewModel (data) { var self = this; this.textFlag = ko.observable(false); this.changeText = function (eventID, panelStatus) { this.textFlag = ko.observable(false); if(eventID == 1) this.textFlag(panelStatus); } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1 data-bind="text: textFlag() === true"></h1> <button data-bind="click: changeText(1, true)">Button</button> 

請參閱jsfiddle上的示例

Answer 1

兩個問題：

1. 您正在changeText 重新創建您的observable。 你需要刪除this.textFlag = ko.observable(false); 線。 你已經完成了這一點。

2. 您的click處理程序定義不正確。 請記住，KO會接受您的綁定並有效地創建一個對象初始化程序。 讓我們來看看會創建的那個：

    { click: changeText(1, true) } 

   看到問題？ 調用 changeText(1, true)並將調用結果分配給click 。 相反，您想要提供函數引用，因此click可以調用該函數。

   （顯然，什么KO實際上做的是比這更復雜，有很多with包裝，但最終這是它做什么。）

從changeText刪除錯誤行后，您可以執行以下操作：

<button data-bind="click: changeText.bind($data, 1, true)">Button</button>

實例：

 function ViewModel (data) { var self = this; this.textFlag = ko.observable(false); this.changeText = function (eventID, panelStatus) { if(eventID == 1) this.textFlag(panelStatus); } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1 data-bind="text: textFlag() === true"></h1> <button data-bind="click: changeText.bind($data, 1, true)">Button</button> 

...但是在viewmodel上定義一個使用1, true的函數可能更好：

this.changeText1True = function() { return this.changeText(1, true); };

......並稱之為：

<button data-bind="click: changeText1True">Button</button>

（顯然，使用更好的名字。）

實例：

 function ViewModel (data) { var self = this; this.textFlag = ko.observable(false); this.changeText = function (eventID, panelStatus) { if(eventID == 1) this.textFlag(panelStatus); } this.changeText1True = function() { return this.changeText(1, true); } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1 data-bind="text: textFlag() === true"></h1> <button data-bind="click: changeText1True">Button</button> 

Answer 2

您正在重新定義this.textFlag變量，從而破壞了綁定。 您所要做的就是使用this.textFlag(panelStatus);更新其值this.textFlag(panelStatus); 像這樣 ：

 function ViewModel(data) { var self = this; this.textFlag = ko.observable(false); this.changeText = function(eventID, panelStatus) { if (eventID == 1) { this.textFlag(panelStatus); } } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1 data-bind="text: textFlag() === true"></h1> <button data-bind="click: function () { changeText(1, true) }">Button</button> 

如TJ Crowder所述，您還必須將您的函數調用包含在另一個匿名函數中，如文檔中所示，或使用bind建議創建另一個函數。

Answer 3

 function ViewModel (data) { var self = this; self.textFlag = ko.observable(false); self.changeText = function (eventID, panelStatus) { if(eventID === 1) { self.textFlag(panelStatus); } } } var viewModel = new ViewModel(); ko.applyBindings(viewModel); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h1 data-bind="text: textFlag"></h1> <button data-bind="click: changeText.bind($data, 1, true)">Button</button> 

對您的代碼進行了一些更改。