Ember.jsのボタンのバインドを有効にした状態

Question

Ember.jsで足を濡らしているだけで、私は理解できないと確信しています。

私は選択されたオブジェクトコントローラを持っています。これにはコンテンツがあり、これは現在選択されているモデルであるEmber.Objectです。モデルにはプロパティ（isDirty）があります。基本的には、フォーム上の保存ボタンを有効にするには、オブジェクトが汚れていて保存する必要がある場合のみ有効にしてください。

私はフォームをうまくバインドすることができましたが、保存ボタンのisEnabledBindingプロパティは何もしていないか、バインディングを正しく接続していません。

私は基本的なセットアップを示すjsfiddleを用意しました。

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

どのように私はisDirtyがtrueの場合にのみ、ボタンが有効にするのですか？バインディングは、選択したオブジェクトコントローラのコンテンツプロパティが変更された場合にも機能します。

Answer 1

にはisEnabledというプロパティがありません。 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') 
}); 

使用Ember.Binding.notは次のようになり、独自の計算された財産を、書くための単なるショートカットです：

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

---

は、私もあなたのコードは少しリファクタリング：

• あなたがcreateとextendを混合：クラスのインスタンスのためのcreateとextendを使用しています。 this

• についての良いブログの記事がありますそれは私がこれを行う方法を見つけ、それはApp.controller代わりのApp.Controller

Answer 2

する必要がありますので、クラスのインスタンスのための大文字と小文字を使用することが慣習のようなものです今は廃止された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.Binding.notは存在しません。おそらく更新する必要があるかもしれませんが、ドキュメントには表示されないため、実際には削除されている可能性があります）