在Ember.js中绑定启用按钮的状态 [英] Binding enabled state of button in Ember.js

问题描述

我刚刚用Ember.js弄湿了我的脚，我确定我不明白。我有一个选定的对象控制器。它有一个内容，它是一个Ember.Object，它是当前选择的模型。该模型有一个属性（isDirty），基本上我希望我的窗体上的保存按钮只有当对象变脏并需要保存时才启用。

我已经设法绑定窗体很好，但是保存按钮上的isEnabledBinding属性是没有做任何事情，或者我没有正确绑定绑定。

我准备了一个jsfiddle演示我的基本设置。

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

仅当isDirty为真时，如何使按钮启用？

解决方案

问题是，没有code> isEnabled 属性 Ember.Button 。您需要绑定到禁用属性。

一种可能是创建一个自定义 Ember.Button 为您处理此事，请参阅 http://jsfiddle.net/LabpW/ 。

Handlebars ：

  {{＃查看App.SaveModelButton modelBinding =model}}保存{{/ view}} 
  

JavaScript

  App.SaveModelButton = Ember.Button.extend（{
 disabledBinding：Ember.Binding .not（'model.isDirty'）
}）; 
  

使用的 Ember.Binding.not 只是编写自己的计算属性的快捷方式，如下所示：

  App.SaveModelButton = Ember.Button.extend {
 disabled：function（）{
 return！Ember.getPath（this，'model.isDirty'）; 
} .property（'model.isDirty'）。cacheable（）
}）; 
  

---

我也重构了你的代码： p>

• 您混合创建和扩展：为实例使用创建，为课程使用 extends 。有一个关于这个的好博客文章




• 这是一个惯例，使用lowerCase的实例和UpperCase的类，所以它应该是 App.controller 而不是 App.Controller

I'm just getting my feet wet with Ember.js, and I've hit something that I'm sure I'm not understanding.

I've got a selected object controller. It has content, which is an Ember.Object, which is the currently selected model. The model has a property (isDirty), and basically I'd like my save button on my form to be enabled only when the object is dirty and needs to be saved.

I've managed to bind up the form just fine, but the isEnabledBinding property on the save button is either not doing anything or I'm not hooking up the binding properly.

I've prepared a jsfiddle demonstrating my basic set up.

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

How do I get the button to be enabled only when isDirty is true? The bindings should also work if the content property on the selected object controller changes.

解决方案

The problem is that there is no isEnabled property on Ember.Button. You need to bind to the disabled property.

One possibility is to create a custom Ember.Button which handles this for you, see http://jsfiddle.net/LabpW/.

Handlebars:

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

JavaScript:

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

The used Ember.Binding.not is just a shortcut for writing your own computed property, which would look like this:

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

---

I also refactored your code a bit:

• You mixed create and extend: use create for instances and extend for classes. There is a good blog post about this

• It's kind of a convention to use lowerCase for instances and UpperCase for classes, so it should be App.controller instead of App.Controller

这篇关于在Ember.js中绑定启用按钮的状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！