tabs - 在 ember 中实现标签面板的最佳方法是什么？

Question

我是 ember 的新手，正在尝试构建一个 Ember 驱动的 Web 应用程序。我已经阅读了各种 tuts 并研究了几个例子。基本概念很清楚，但现在我一直在尝试实现标签面板。我的方法如下:

查看

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>

应用中的使用

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 元素，则会引发以下错误

Uncaught Error: assertion failed: Target <(subclass of Ember.View):ember217> does not have action {{this.actionName}}

我也很好奇我是否应该使用路由器来实现标签。但据我所知，路由器作用于应用程序级别，旨在用于单个 UI 组合。

Answer 1

问题出在您的模板中:

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

AFAIK，无法绑定(bind) Action ，所以当你写这个时，它会尝试调用方法 {{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);
    }
  })
});

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

但我认为路由器是做到这一点的正确方法。建议你看看 Ember Router example by @ghempton , 它用 Ember.Router 定义选项卡.