次のようにコンポーネントを定義しました。
export default Ember.Component.extend({
classNameBindings: ['isCategory'],
didInsertElement: function() {
Ember.addObserver(Discourse, 'currentPath', this.routeChanged);
},
routeChanged: function(){
var route = Discourse.get('currentPath');
if (route == 'discovery.top') {
this.set('path', '/top');
this.set('label', 'top');
} else if (route == 'discovery.categories'){
this.set('path', '/categories');
this.set('label', 'Categories');
} else {
this.set('path', '/latest');
this.set('label', 'Latest');
}
},
render: function(buffer) {
this.routeChanged();
buffer.push('<a href="' + this.get('path') + '">' + this.get('label') + '</a>');
}
});
path
ロジックは(きれいではありませんが)意図したとおりに機能しますが、またはの値がlabel
変更されたときにEmberにコンポーネントを再レンダリングするように指示する方法がわかりません-render関数で使用しようとしましたが、これ.observes()
を呼び出しようとしましたthis.rerender()
動作しません。
ありがとう
編集:
はい、もちろん、手動でレンダリングするべきではありません。
私は今、単純なテンプレートを持っています:
<a href="{{path}}">{{label}}</a>
このコンポーネントに支えられています:
export default Ember.Component.extend({
classNameBindings: ['isCategory'],
templateName: "components/memory-nav",
didInsertElement: function() {
Ember.addObserver(Discourse, 'currentPath', this.routeChanged);
}.on('init'),
routeChanged: function(){
var route = Discourse.get('currentPath');
if (route == 'discovery.top') {
Ember.Logger.log("Top");
this.set('path', '/top');
this.set('label', 'Top');
} else if (route == 'discovery.categories'){
Ember.Logger.log("Cateogries");
this.set('path', '/categories');
this.set('label', 'Categories');
} else {
Ember.Logger.log("Latest");
this.set('path', '/latest');
this.set('label', 'Latest');
}
}.on('init')
});
これは機能するようになり、パスが変更されたときにログが正しく呼び出されるようになりました。オブジェクトを呼び出すとテンプレートが自動的に更新されると思ってい.set
ましたが、現時点では更新されていません。私は何が欠けていますか?