Question

我有一个包含两个复选框的页面。 e.g。

<label class="checkbox" for="1">
    <input id="1" type="checkbox">
        Option#1
</label>
<label class="checkbox" for="2">
    <input id="2" type="checkbox">
        Option#2
</label>

如果我手动点击浏览器中的复选框＃1，则会检查该框（显然），Backbone会选择更改。

如果我在页面中有一个jQuery示例，例如由一个锚点击，它会检查/选择“代码中的”框，它不会被Backbone拾取。在jQuery中，我尝试了以下所有内容：

$('#2').prop('checked', true, true);
$('#2').attr('checked','checked');
$('#2').trigger( "click" );
$('#2').change();

使用上面的一个代码段在浏览器中显示复选框，但Backbone仅选中手动选中的复选框，而不是“代码中”检查的复选框，即使它们都是一起完成的。

我感谢任何加深我对Backbone事件的理解的答案！

Answer 1

试过这个：

$('#2').prop('checked', true).trigger('change');

Answer 2

以编程方式更改复选框的已检查状态似乎不会触发相应的更改事件。这与Backbone无关，被jQuery视为正常行为。

所以，总结一下：

$('#1').prop('checked', true); - 选中一个复选框

$('#1').change(); - 触发该复选框的change事件

$('#1').prop('checked', true).change(); - 选中一个复选框并明确触发change事件

我已经设置了一个说明你的例子的jsFiddle，请查看here。

Answer 3

我在这方面花了太长时间。我遇到的问题是我正在收听复选框上的点击事件：

events: {
  'click .some-checkbox-class: function() {...}
}

我已经尝试了几个小时以编程方式检查茉莉花测试中的这个复选框，只是意识到骨干从来没有把它拿起来。（当我将其作为利益相关者使用时，浏览器中的所有内容都会起作用）

我把它改成了这个，它具有相同的效果，我能够在茉莉花测试中检查它，骨干就像它应该的那样......

events: {
  'change .some-checkbox-class: function() {...}
}

在茉莉花单元测试中，我能够通过以下方式解决这个问题：

view.$el.find('.some-checkbox-class').prop('checked', true).change();

Backbone.js手动点击复选框激活，但“代码点击”一个没有

3 个答案: