单击绑定以使复选框在Knockout中无法正常工作

时间:2013-05-31 17:15:00

标签: javascript jquery knockout.js

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

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

有什么建议吗?

2 个答案:

答案 0 :(得分:8)

两件事:

  • 添加model作为ClickSendAtTime
  • 的参数
  • ClickSendAtTime上返回true以避免取消该事件

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

有关您需要返回真实

的原因的一些信息
  

允许默认操作

     

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

     

但是,如果您确实要继续执行默认操作,只需从事件处理函数返回true。

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

答案 1 :(得分:2)

ViewModel内部,变量model未定义,因此您应将其删除,而是使用this,然后在复选框内点击event返回true,以便事件正常工作正常情况下(如果您没有返回任何内容或虚假事件,就好像它已被取消一样)

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