2012-11-14 45 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/