2012-11-14 29 views
1

我想从对象数组中动态生成一些选项卡。每个对象都包含我想从视图中调用的操作名称。ember.js从对象数组中生成链接并绑定动作

下面是一个例子:http://jsfiddle.net/arenoir/vDEKt/

在拨弄你会看到,如果我创建了{{行动“名称”}}帮助它工作的联系,但我希望能够在名称绑定到视图的'content.name'

我对这一切都错了吗?有什么建议么?

这里是代码(S.O需要这个?):

App = Ember.Application.create() 

App.Router = Ember.Router.extend 
    root: Ember.Route.extend 
    goTab1: Em.Route.transitionTo('tab1') 
    goTab2: Em.Route.transitionTo('tab2') 
    goTab3: Em.Route.transitionTo('tab3') 
    index: Ember.Route.extend 
    route: '/' 
    redirectsTo: 'tab1' 
    tab1: Ember.Route.extend 
    route: '/tab1' 
    connectOutlets: (router) -> 
     router.get('applicationController').set('selectedTab', 'tab1') 
    tab2: Ember.Route.extend 
    route: '/tab2' 
    connectOutlets: (router) -> 
     router.get('applicationController').set('selectedTab', 'tab2') 
    tab3: Ember.Route.extend 
    route: '/tab3' 
    connectOutlets: (router) 
     router.get('applicationController').set('selectedTab', 'tab3') 

App.ApplicationController = Ember.Controller.extend 
    primaryTabs: [ 
    Ember.Object.create({id: 'tab1', name: 'Tab1', action: 'goTab1'}) 
    Ember.Object.create({id: 'tab2', name: 'Tab2', action: 'goTab2'}) 
    Ember.Object.create({id: 'tab3', name: 'Tab3', action: 'goTab3'}) 
    ] 

App.ApplicationView = Ember.View.extend 
    templateName: 'application' 

App.TabsView = Ember.CollectionView.extend 
    tagName: 'ul' 
    classNames: ['nav'] 
    selectedBinding: 'controller.selectedTab' 
    contentBinding: 'controller.primaryTabs' 

    itemViewClass: Ember.View.extend 
    tagName: 'li' 
    template: Ember.Handlebars.compile("<a {{action view.content.action}}>{{view.content.name}}</a>") 
    classNameBindings: ['isActive:active'] 
    isActive: (-> 
     @get('content.id') is @get('parentView.selected') 
    ).property('parentView.selected') 



#and the template 
<script type="text/x-handlebars" data-template-name="application"> 
    {{view App.TabsView}} 
    <br> 
    <a {{action goTab1 href=true}}>goTab1</a> 
    <a {{action goTab2 href=true}}>goTab2</a> 
    <a {{action goTab3 href=true}}>goTab3</a> 
    {{outlet}} 
</script> 

回答

4

传递的标签对象进入路由器,并找出其状态的路由器应该过渡到基于标签。

例如:

goTab: function(router, event) { 
     router.transitionTo(event.context.get('id'));    
    } 

<a {{action goTab view.content}}>{{view.content.name}}</a> 

这里是工作提琴:http://jsfiddle.net/vDEKt/9/