在Ember.js中绑定启用状态的按钮

Question

我刚刚和Ember.js擦肩而过,我发现了一些我确信我不理解的东西.

我有一个选定的对象控制器.它有内容,它是一个Ember.Object,它是当前选择的模型.该模型有一个属性(isDirty),基本上我希望我的表单上的保存按钮只有在对象脏了并需要保存时才能启用.

我已经设法将表单绑定得很好,但是保存按钮上的isEnabledBinding属性要么没有做任何事情,要么我没有正确地连接绑定.

我准备了一个jsfiddle来展示我的基本设置.

http://jsfiddle.net/blargity/fqc73/1/

如何在isDirty为true时启用按钮？如果所选对象控制器上的content属性发生更改,则绑定也应该有效.

Answer 1

我找到了一种方法来做到这一点,而不使用现已弃用的Ember.Button.

在车把模板中:

<button {{action "save" target="controller"}} {{bindAttr disabled="view.isNotDirty"}}>Save</button>

在视图中:

isNotDirty: function(){ 
    return !this.get('controller.content.isDirty') 
}.property('controller.content.isDirty').cacheable()

(对于我的Ember版本,Ember.Binding.not不存在.也许我需要更新,但文档也没有显示它,所以也许它实际上已被删除.)

Answer 2

问题是没有isEnabled财产Ember.Button.您需要绑定到该disabled属性.

一种可能性是创建一个Ember.Button为您处理此问题的自定义,请参阅http://jsfiddle.net/LabpW/.

把手:

{{#view App.SaveModelButton modelBinding="model"}}Save{{/view}}

JavaScript:

App.SaveModelButton = Ember.Button.extend({
    disabledBinding: Ember.Binding.not('model.isDirty')
});

used Ember.Binding.not只是编写自己的计算属性的快捷方式,如下所示:

App.SaveModelButton = Ember.Button.extend({
    disabled: function() {
        return !Ember.getPath(this, 'model.isDirty');
    }.property('model.isDirty').cacheable()
});

我还重构了一下你的代码:

• 你混合create和extend:create用于实例和extend类.关于此,有一篇很好的博客文章

• 对于实例使用lowerCase和对类使用UpperCase是一种惯例,所以它应该App.controller代替App.Controller