【问题标题】:Backbone - Checkbox stays checked?Backbone - 复选框保持选中状态?
【发布时间】:2012-08-25 02:35:21
【问题描述】:

我正在尝试将一个复选框连接到我的视图,但只要我勾选它,它就会保持选中状态,即使我再次单击它?

这是视图的一部分:

views.PaginatedView = Backbone.View.extend({
    events: {
        'click input.completedEnquiries': 'filterCompletedEnquiries'
    },
    filterCompletedEnquiries: function (e) {
        return e.currentTarget.checked;
    }
});

模板如下:

<label>Show Completed: <input type="checkbox" class="completedEnquiries" /></label>

我不知道我在这里做错了什么?

编辑

这是问题的 Jsfiddle:http://jsfiddle.net/9cvVv/167/

【问题讨论】:

  • 其他事情正在发生,因为一切看起来都适合我。你能在 jsFiddle 中重现这个问题吗?

标签: javascript jquery dom backbone.js dom-events


【解决方案1】:

问题是从您的事件处理程序返回e.currentTarget.checked。从此处理程序返回 truefalse 将为您选中或取消选中该框


 filterCompletedEnquiries: function(e) {
        //return e.currentTarget.checked;
    },

注释掉那个return语句,它工作正常。您仍然可以获取信息,但不要从该方法返回任何内容。


 filterCompletedEnquiries: function(e) {
        var isChecked = e.currentTarget.checked;
        // do stuff here, based on it being checked or not
    },

编辑

下面是一个例子,基于 cmets 中的对话:


views.PaginatedView = Backbone.View.extend({
    events: {
        'click input.completedEnquiries': 'completedEnquiriesClicked'
    },

    // this is explicitly an event handler, and that's all it should be used for
    completedEnquiriesClicked: function(e){
      this.showCompletedEnquiries = e.currentTarget.checked;
    },

    doSomething Else: function (e) {
        // now that we need to know, we can just check that attribute
        if (this.showCompletedEnquiries){
          // do something here
        }
    }
});

这只是您拥有的众多选项之一,可以让您按照自己的方式工作。

【讨论】:

  • 但是我想根据它是否检查返回一个值,因为我将在另一个函数中使用该值..
  • 不要为此使用事件处理程序。正如您已经看到的那样,这是一个坏主意。将数据存储在模型中并以另一种方法访问该模型中的数据
  • 你可以将它存储在视图的一个属性中,或者创建一个不同的方法(不是事件处理程序)来返回值。请记住,这只是 javascript。作为主干视图没有什么特别的......编写代码来保存变量或在需要时访问它。只是不要使用事件处理程序,因为您已经看到了导致的问题。
  • 谢谢!我在 initialize 函数中添加了一个属性,现在它似乎可以工作了!
  • 可行:) 我更新了我的答案以显示另一种可能性。有很多选择可以完成这项工作。
猜你喜欢
  • 2016-06-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-14
  • 1970-01-01
  • 1970-01-01
  • 2021-09-05
相关资源
最近更新 更多