ember.js 从对象数组生成链接并绑定操作答案

【问题标题】：ember.js generate links from array of objects and bind actionember.js 从对象数组生成链接并绑定操作
【发布时间】：2012-11-14 02:18:46
【问题描述】：

我正在尝试从对象数组中动态生成一些选项卡。每个对象都包含我想从视图中调用的动作名称。

这里是一个例子：http://jsfiddle.net/arenoir/vDEKt/

在小提琴中，您将看到我是否使用 {{action 'name'}} 帮助器创建了一个链接，但我希望能够将名称绑定到视图的 '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>

【问题讨论】：

标签： ember.js

【解决方案1】：

将选项卡对象传递给路由器，并根据选项卡确定路由器应转换到哪个状态。

例如：

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

和

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

这是一个有效的小提琴：http://jsfiddle.net/vDEKt/9/

【讨论】：