2

我定义了一个组件如下：

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>');
  }
});

逻辑（虽然不漂亮）按预期工作，但是我不知道如何告诉 Ember 在path或的值label发生变化时重新渲染组件 - 我已经尝试.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原以为调用对象会自动更新模板，但是目前没有更新。我错过了什么？

4

0 回答 0