Question

我正在尝试在Ember中创建类似旋转木马的东西，其中显示的当前项目由页面上的四个按钮之一控制（为简单起见，我只显示两个按钮）。我目前正在使用网点和路由来实现这一点，但我更愿意在没有改变路线的情况下完成这项工作。以下是我目前的情况：

<!-- index.hbs (snipped, simplified) -->
<div>
  {{outlet highlights}}
</div>
<!-- buttons for controlling outlet content (only showing 2 for now) -->
<div>
  <a class="button" href="#" {{action "showHighlight" "placeholder1"}}>
    Highlight 1
  </a>
  <a class="figcaption" href="#" {{action "showHighlight" "placeholder2"}}>
    Highlight 2
  </a>
</div>

我的索引控制器处理按下按钮时调用的操作：

App.IndexController = Ember.ArrayController.extend({
  highlights: ['placeholder1', 'placeholder2'],

  actions: {
    showHighlight: function(highlight) { // render a new view into 
      this.transitionToRoute('/highlights/' + highlight);
    }
  }
});

我的亮点路线：

App.Router.map(function() {
  this.resource('highlights', function() {
    this.route('placeholder1', { path: '/placeholder1' });
    this.route('placeholder2', { path: '/placeholder2' });
    this.route('placeholder3', { path: '/placeholder3' });
    this.route('placeholder4', { path: '/placeholder4' });
  });
});

对于每个占位符路线：

App.Placeholder1Route = Ember.Route.extend({
  renderTemplate: function() {
    this.render({
      into: 'index',
      outlet: 'highlights'
    });
  }
});

有没有更好的方法来做到这一点，而不必使用路线？

Answer 1

我最终通过处理路线中的动作并选择适当的模板进行渲染来解决这个问题：

App.IndexRoute = Ember.Route.extend({
  actions: {
    showHighlight: function(name) {
      var highlightTemplate = 'highlight_' + name;
      this.render(highlightTemplate, {
        into: 'index',
        outlet: 'highlights'
      }
    }
  }
});

使用这种技术，您不需要为高亮显示指定任何路径，也不需要IndexController（除非您想要处理其他事件）。

Ember.js在不改变路线的情况下将一个视图嵌入到另一个视图中

1 个答案: