1

オブジェクトの配列からいくつかのタブを動的に生成しようとしています。各オブジェクトには、ビューから呼び出したいアクション名が含まれています。

以下に例を示します: http://jsfiddle.net/arenoir/vDEKt/

{{action 'name'}} ヘルパーを使用してリンクを作成すると、フィドルで動作することがわかりますが、名前をビューの 'content.name' にバインドできるようにしたいと考えています。

私はこれについてすべて間違っていますか？助言がありますか？

ここにコードがあります（SOはこれが必要ですか？）：

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

1 に答える 1

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/

于 2012-11-14T04:34:35.927 に答える