Question

我正在一个应用程序中处理RSVP表单，我正试图找出如何让两个复选框彼此镜像，当一个被检查时另一个不是。现在，我的方法是将每个复选框绑定到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中是微不足道的，我想到创建了一个计算属性，第二个复选框绑定到并监听isComing，但那些看起来不像对< / strong>方式。

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

Answer 1

我能想到的最好方法是通过computedProperty。我分叉你的jsfiddle来展示它是如何工作的here。您可以像这样编写控制器：

App.ApplicationController = Ember.ObjectController.extend({
    isComing: false,
    isntComing: function(key, value) {
        if (arguments.length == 2) {
            this.set('isComing', !value);
        }
        return !(this.get('isComing'));
    }.property('isComing')
});

Answer 2

如果您可以使用单选按钮，那么我将使用此花花公子的实现（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/

话虽如此，如果你不介意事先检查一下，亚当的答案也同样好。

Answer 3

Handlebars中没有“not”操作符这样的东西。您需要将第二个复选框的状态绑定到其他某个属性。可以这样做：模板

{{view Ember.Checkbox checkedBinding="isComing"}}
{{view Ember.Checkbox checkedBinding="isNotComing"}}

JS

App.ApplicationController = Ember.ObjectController.extend({
    isComing: false,
    isNotComing: Em.computed.not('isComing')
});

Handlebars / Ember.Checkbox - 2个绑定复选框，一个选中false

3 个答案: