我是新手,并试图构建一个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组合.