Question

我一直在努力与敲除数据绑定几天。我挣扎的简单但非常讨厌的问题的例子如下。

我有一个简单的ViewModel类，其方法将布尔值从false更改为true。 Knockout在页面加载时与HTML绑定，但是在点击事件上数据绑定似乎存在问题。

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

两个问题：

您在changeText中重新重新创建了您的观察对象。您需要删除this.textFlag = ko.observable(false);行。你已经完成了这一点。

您的click处理程序定义不正确。请记住，KO会接受您的绑定并有效地创建一个对象初始化程序。让我们来看看会创建的那个：

{
    click: changeText(1, true)
}

看到问题？调用 changeText(1, true)并将调用的结果分配给click。相反，您希望提供函数引用，因此click可以调用函数。

（显然，KO实际上做的事情比这更复杂，有很多with包装，但最终还是它的作用。）

< / LI>

从changeText删除错误行后，您可以执行此操作：

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

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

...但在使用1, true的viewmodel上定义一个函数可能更好：

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

...并称之为：

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

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

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您正在重新定义this.textFlag变量，从而破坏了绑定。您所要做的就是使用this.textFlag(panelStatus);更新其值，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

如TJ Crowder所述，您还必须将您的函数调用包含在另一个匿名函数中，如docs中所示，或使用类似建议的绑定创建另一个函数。

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

对您的代码进行了一些更改。

KnockoutJS - 数据绑定在按钮点击后不会改变文本

3 个答案: