可见绑定——淘汰JS答案

【问题标题】：Visible binding - knockout JS可见绑定——淘汰JS
【发布时间】：2013-03-20 07:27:37
【问题描述】：

我正在尝试使用 3 张带有点击事件的图像来控制元素的可见性（下面小提琴代码中的黄色框）。它不工作。

我定义了以下可见性属性

    IsSelectionPoll = ko.observable(true);
    IsBoolPoll = ko.observable();
    IsRatePoll = ko.observable();

这里是点击事件：

SetTypeId = function (typeId) {
  //selectPollType = typeId;
  $('<p/>').text(typeId).appendTo('body');
  IsSelectionPoll = (typeId == '1');
  console.log(typeId);
  IsBoolPoll = (typeId == '3');
  IsRatePoll = (typeId == '2');
 }

我尝试使用 SELF 和 this 以及许多其他技巧，但我不知道为什么它不起作用。

请在此处查看代码： http://jsfiddle.net/goldenrate/NfDyX/

谢谢，大卫

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

您没有在其中创建任何视图模型 - 将函数声明更改为：

function PollWizardViewModel(initialData){

然后是绑定线：

 ko.applyBindings(new PollWizardViewModel());

一旦完成，点击绑定本身应该可以正常工作。

编辑：另外，不要重新分配您的 observable，而只需更改它们的值，否则与 dom 的绑定会丢失（因为链接是与旧的 observable 在您重新分配它们时丢弃的参考） - 例如而不是：

this.IsSelectionPoll = (typeId == '1');

使用：

this.IsSelectionPoll(typeId == '1');

【讨论】：

谢谢。正如您从呈现的结果中可以看出的那样，单击绑定的工作原理（我添加了 $('
').text(typeId).appendTo('body');），但我也根据您的建议修复了定义，它仍然无法正常工作。
你说得对，可观察设置也有问题 - 我更新了答案。
再次感谢。我在这里应用了更改jsfiddle.net/goldenrate/NfDyX/12 并重新组织了代码，但它根本不起作用。这是一个非常简单的任务，我过去做了很多次，但我无法弄清楚问题出在哪里。
您在全局对象（窗口）中设置变量，然后尝试从 ViewModel 函数（而不是您创建的 instance）中捕获它们。我更新了您的小提琴以说明我的意思：jsfiddle.net/NfDyX/13 - 请注意构造函数和 settypeid 函数中的 this 以及函数本身分配给视图模型原型的事实。希望对您有所帮助。