javascript - Handlebars/Ember.Checkbox - 2 个绑定(bind)的复选框，一个勾选为 false

Question

我正在处理一个应用程序中的 RSVP 表单，我正在尝试弄清楚如何让两个复选框相互镜像，当一个被选中时另一个没有被选中。现在，我的方法是将每个复选框绑定(bind)到 isComing 属性，其中一个复选框在 !isComing 上被选中，但它不是那样工作的。

这是我尝试过的:

HTML:

<script type='text/x-handlebars'>
<label>I&#39;m coming!</label>
{{view Ember.Checkbox checkedBinding="isComing"}}
<label>I can&#39;t make it.</label>
{{view Ember.Checkbox checkedBinding="!isComing"}}

{{#if isComing}}
<p>The rest of the form will be here.</p>
{{/if}}
</script>

JS:

window.App = Ember.Application.create();

App.ApplicationController = Ember.ObjectController.extend({
    isComing: false
});

这行不通。第一个复选框工作正常，但第二个复选框完全不受影响。显然，!isComing 是不允许的...

这在 jQuery 中是微不足道的，我想创建一个计算属性，第二个复选框绑定(bind)到它并监听 isComing，但那些看起来不像 正确的方式。

使用 Handlebars 或 Ember 有更简单的方法吗？ Here's the fiddle if you want to experiment.

Answer 1

如果你可以使用单选按钮，那么我会使用这个家伙的实现(http://thoughts.z-dev.org/2013/07/04/radio-buttons-in-ember-js/)，简单干净

App.RadioButton = Ember.View.extend({
    tagName : "input",
    type : "radio",
    attributeBindings : [ "name", "type", "value", "checked:checked:" ],
    click : function() {
        this.set("selection", this.$().val())
    },
    checked : function() {
        return this.get("value") == this.get("selection");   
    }.property()
});

http://jsfiddle.net/3aZzn/2/

话虽如此，如果您不介意预先检查一个人，Adam 的回答同样好。