Question

我已经按如下方式定义了一个组件：

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重新渲染组件 - 我尝试过使用渲染函数上的.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会自动更新模板，但此刻不会更新。我错过了什么？

告诉Ember重新渲染组件

0 个答案: