3

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

当未选择文本框时我必须禁用文本框的部分工作正常，但清空部分不能正常工作，因为我必须为其使用复选框的点击绑定，并且一旦我使用点击绑定，它就会破坏复选框的行为，它变成不可点击。我有一个 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());

有什么建议么？

4

2 回答 2

8

两件事情：

  • 添加model为参数ClickSendAtTime

  • 返回 true onClickSendAtTime以避免取消事件

    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 将阻止事件采取任何默认操作。例如，如果您使用事件绑定来捕获输入标签的按键事件，浏览器将只会调用您的处理函数，并且不会将键的值添加到输入元素的值中。一个更常见的示例是使用 click 绑定，它在内部使用此绑定，您的处理程序函数将被调用，但浏览器不会导航到链接的 href。这是一个有用的默认值，因为当您使用点击绑定时，通常是因为您将链接用作操作视图模型的 UI 的一部分，而不是作为指向另一个网页的常规超链接。

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

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

于 2013-05-31T17:26:31.900 回答
2

在您ViewModel的变量内部model未定义，因此您应该将其删除，而是this在复选框内使用并单击eventreturn 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());
于 2013-05-31T17:31:59.530 回答