Knockout中复选框的点击绑定不正常工作

Question

我有一个复选框和文本框。每当复选框未被选中时，我希望文本框为空并且无法编辑。

当文本框未被选中时禁用文本框的部分工作正常，但清空部分不正常，因为我必须使用复选框的点击绑定来清空文本框，而一旦我使用了点击绑定，它就会破坏复选框的行为，导致无法单击。这是 jsFiddle 的链接：http://jsfiddle.net/qK5Y3/16/

以下是示例代码：

<input type="checkbox" id="emailTemplateSendAtTime" name="emailTemplateSendAtTime" data-bind="checked:SendAtTime, click:ClickSendAtTime"/>
<input type="text" style="width: 250px" id="emailTemplateSendAtTimeProperty" data-bind="value: SendAtTimeProperty, enable:SendAtTime"/>

这是我的js代码：

var ViewModel = function () {

    this.SendAtTimeProperty = ko.observable("Something");
    this.SendAtTime = ko.observable();



    this.ClickSendAtTime = function () {
                if (model.SendAtTime() == false) {
                    model.SendAtTimeProperty("");
                }
            };
};
ko.applyBindings(new ViewModel());

有什么建议吗？

- Lost

Answer 1

有两个要点：

• add model as parameter for ClickSendAtTime

• return true on ClickSendAtTime to avoid cancelling the event

  var ViewModel = function () {
  
      this.SendAtTimeProperty = ko.observable("Something");
      this.SendAtTime = ko.observable();
  
      this.ClickSendAtTime = function (model) {
              if (model.SendAtTime() == false) {
                  model.SendAtTimeProperty("");
              }
              return true;
          };
  };
  
  ko.applyBindings(new ViewModel());
  

另一种定义 ClickSendAtTime 的方法是：

this.ClickSendAtTime = function () {
      if (this.SendAtTime() == false) {
          this.SendAtTimeProperty("");
      }
      return true;
};

关于为什么需要返回true的一些信息

允许默认操作

默认情况下，Knockout会阻止事件执行任何默认操作。例如，如果您使用事件绑定来捕获输入标记的keypress事件，则浏览器将只调用处理程序函数，并且不会将按键的值添加到输入元素的值中。更常见的例子是使用click绑定，它在内部使用此绑定，其中将调用处理程序函数，但浏览器不会导航到链接的href。这是一个有用的默认设置，因为当您使用click绑定时，通常是因为您正在使用链接作为UI的一部分来操纵您的视图模型，而不是作为另一个网页的常规超链接。

但是，如果您确实想让默认操作继续进行，请从事件处理程序函数中返回true。

http://knockoutjs.com/documentation/event-binding.html

- Claudio Redi

---

非常感谢您的回答。那个方法很有效。虽然我不太清楚为什么要返回true以避免取消事件？您能否详细解释一下或者指导我阅读更多相关文章？ - Lost

Answer 2

在您的ViewModel中，变量model未定义，因此您应该将其删除，而是使用this，并在复选框单击event内返回true，以使事件正常工作（如果您没有返回任何内容或false，则该事件将被视为已取消）。

var ViewModel = function () {
    self = this;
    self.SendAtTimeProperty = ko.observable("Something");
    self.SendAtTime = ko.observable();
    this.ClickSendAtTime = function () {
        if (self.SendAtTime() == false) {
            self.SendAtTimeProperty("");
        }
        return true;
    };
};
ko.applyBindings(new ViewModel());

- ebram khalil

---

你说得没错。但是我不记得在使用 Knockout 时在任何事件绑定中返回 true。这个有什么特别之处吗？ - Lost

在这里，您正在使用click事件。例如，如果您想停止该事件，只需简单地返回false; 尝试使用check事件，您会发现您不需要返回任何内容。 - ebram khalil

例如，同一个视图模型具有添加功能，该功能绑定到单击绑定的添加按钮上，并且以下代码正常工作：model.Add = function () { var data = { ID: "", Name: "", FromAddress: "", Subject: "", Body: "", CampaignId: model.CampaignId(), DefaultToAddress: "", SendAtTimeProperty: "", SendAtTime: false }; model.LoadEditBox(data); }; - Lost