ember.js generate links from array of objects and bind action

Question

I am trying to dynamically generate some tabs from an array of objects. Each object includes the action name that I would like to call from the view.

Here is an example: http://jsfiddle.net/arenoir/vDEKt/

In the fiddle you will see if I create a link with the {{action 'name'}} helper it works, but I would like to be able to bind the name to the view's 'content.name'

Am I going about this all wrong? Any suggestions?

here is the code (SO requires this?):

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>

Answer 1

Pass the tab object into the router, and figure out which state the router should transition to based on the tab.

For example:

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

and

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

Here is a working fiddle: http://jsfiddle.net/vDEKt/9/