在ember中实现tabpanel的最佳方法？

Question

我是新手,并试图构建一个Ember驱动的Web应用程序.我已经阅读了各种各样的内容并研究了几个例子.基本概念很清楚,但现在我仍然试图实现一个tabpanel.我的方法如下:

视图

Configurator.TabPanelView = Ember.View.extend({
    classNames: ['tabPanel'],
    templateName: 'tabPanel'
});

模板

<script type="text/x-handlebars" data-template-name='tabPanel'>
  <div class='tabHead'>
      <ul>
          {{#each tabViews}}
          <li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>
          {{/each}}
      </ul>
      <div class="tab-content">{{outlet}}</div>
  </div>
</script>

在App中的用法

var tab= Configurator.TabPanelView.create({

            classNames: ['assortment'],
            tabViews: [{ title: 'First', value:'Foo', actionName: 'firstTab' },{title: 'Second', value:'Foo', actionName: 'secondTab' }],

            firstTab: Ember.View.extend({
                templateName: 'first'
            }),
            secondTab: Ember.View.extend({
                templateName: 'second'
            })
        });
        tab.appendTo("body");

TabTemplate正确呈现,但如果我尝试单击li元素,则会抛出错误

未捕获错误:断言失败:目标<(Ember.View的子类):ember217>没有操作{{this.actionName}}

我也很好奇我是否应该使用路由器来实现标签.但据我所知,路由器在应用程序级别上运行,并且旨在用于单个UI组合.

Answer 1

问题出在您的模板中：

<li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>

AFAIK，动作不能被绑定，所以当你写这个的时候，它会尝试调用方法{{this.actionName}}而不是firstTab，例如。

我认为这是一个典型的示例，您应该将Ember.CollectionView与其中itemViewClass的click方法一起使用，即：

App.MyCollectionView = Ember.CollectionView.extend({
  tagName: 'ul',
  templateName: 'the-template-name',
  itemViewClass: Ember.View.extend({
    click: function() {
      var actionName = this.get('content.actionName'),
          target = this.get('controller.target');
      target.send(actionName);
    }
  })
});

上面的代码肯定不对，但是思路就在这里。

但我认为路由器是做到这一点的正确方法。我建议你看一下@ghempton 的 Ember Router 示例，它定义了 tab 与Ember.Router.