javascript - KnockoutJS - 单击按钮后数据绑定(bind)不会更改文本

Question

几天来，我一直在为 knockout 数据绑定(bind)而苦苦挣扎。下面是我遇到的一个简单但非常烦人的问题示例。

我有一个简单的 ViewModel 类，其中包含一个将 bool 值从 false 更改为 true 的方法。 Knockout 在页面加载时确实与 HTML 绑定(bind)，但在点击事件时数据绑定(bind)似乎存在问题。

当我调试代码时，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

您正在重新定义 this.textFlag 变量，从而破坏了绑定(bind)。您所要做的就是使用 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 回答中所述，您还必须将对函数的调用包装在另一个匿名函数中，如 docs 中所示。或者像建议的那样使用 bind 创建另一个函数。