2013-01-21 11 views
9

私はプログレスバーのように何かしたいと思います。これはemberによって制御されます。だから、私の目には、これを達成するために2年半の方法があります:コントローラのアクセスプロパティはビュー内から

  1. がトリガされたときに要素のwidthを設定コントローラ、中にオブザーバーを持っています。問題:AFAIK、コントローラー内からDOM要素にアクセスすることはできません。つまり、ビューthis.$('#progress')のようにします。

  2. ビューにオブザーバーがいて、コントローラのプロパティを観察しています。問題:コントローラーのプロパティをどのように観察(アクセス)するかわかりません。

  3. (気紛れdata-progress="42"属性に{{bindAttr}}を介してコントローラのプロパティをバインドし、属性の値が変更された時はいつでも要素widthを調整)

答えて

13

オプション2は、あなたの最善の策です。

問題:コントローラのプロパティをどのように観察(アクセス)するのか分かりません。

Emberはビューの作成時にビューのコントローラプロパティを設定します。このプロパティを使用すると、コントローラのプロパティにアクセスできます。

App = Ember.Application.create(); 

App.ApplicationController = Ember.Controller.extend({ 
    percentComplete: '0' 
}); 

App.ProgressView = Ember.View.extend({ 
    percentChanged: function() { 
    percentString = (this.get('controller.percentComplete') + "%"); 
    this.$('.bar').css('width', percentString); 
    }.observes('controller.percentComplete').on('didInsertElement') 
}); 

私はここで作業例を掲載しました:http://jsbin.com/hitacomu/1/edit

+6

コントローラは、ビューである?? – iConnor

+0

私は2番目の@ Connorのコメントです。私は非常に魔法使いがどのようにその魔法を引き付けるためのオブジェクトの種類よりも、名前についてもっと気にしているように思われる。また、jsbinリンクは現時点では何もしていないようです。 –

+1

@PatrickMこれは誤字であり、 'App.ProgressController = Ember.Controller.extend'だったはずです。また、jsfiddleは、移動したjsライブラリを参照する原因となります。私はフィドルと私の答えの両方を更新しました。新しいバージョンがもっと役立つことを願っています。 –

関連する問題