小编Fra*_*que的帖子

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

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

视图

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

模板

<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>
Run Code Online (Sandbox Code Playgroud)

在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");
Run Code Online (Sandbox Code Playgroud)

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

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

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

tabs ember.js

7
推荐指数
1
解决办法
5420
查看次数

标签 统计

ember.js ×1

tabs ×1