tabs - emberでタブパネルを実装する最良の方法は?

Question

私は ember が初めてで、Ember 駆動型の Web アプリケーションを構築しようとしています。私はさまざまなtutsを読み、いくつかの例を研究しました。基本的な概念は明確ですが、今はタブパネルを実装しようとしています。私のアプローチは次のとおりです。

意見

Configurator.TabPanelView = Ember.View.extend({
    classNames: ['tabPanel'],
    templateName: 'tabPanel'
});

テンプレート

<script type="text/x-handlebars" data-template-name='tabPanel'>
  <div class='tabHead'>
      <ul>
          {{#each tabViews}}
          <li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>
          {{/each}}
      </ul>
      <div class="tab-content">{{outlet}}</div>
  </div>
</script>

アプリでの使用

var tab= Configurator.TabPanelView.create({

            classNames: ['assortment'],
            tabViews: [{ title: 'First', value:'Foo', actionName: 'firstTab' },{title: 'Second', value:'Foo', actionName: 'secondTab' }],

            firstTab: Ember.View.extend({
                templateName: 'first'
            }),
            secondTab: Ember.View.extend({
                templateName: 'second'
            })
        });
        tab.appendTo("body");

TabTemplate は正しくレンダリングされますが、li-elements をクリックしようとすると、次のエラーがスローされます

キャッチされないエラー: アサーションに失敗しました: ターゲット <(Ember.View のサブクラス):ember217> にはアクション {{this.actionName}} がありません

また、ルーターを使用してタブ移動を実装する必要があるかどうかも知りたいです。しかし、私が見る限り、ルーターはアプリケーション レベルで動作し、単一の UI 構成で使用されることを意図しています。

Answer 1

問題はあなたのテンプレートにあります:

<li {{action "{{this.actionName}}" target="{{this.value}}"}} >{{this.title}}</li>

私の知る限り、アクションはバインドできないため、これを記述すると、たとえば、の{{this.actionName}}代わりにメソッドを呼び出そうとします。firstTab

これは、メソッドを持つEmber.CollectionViewを使用する必要がある典型的な例だと思います。itemViewClassclick

App.MyCollectionView = Ember.CollectionView.extend({
  tagName: 'ul',
  templateName: 'the-template-name',
  itemViewClass: Ember.View.extend({
    click: function() {
      var actionName = this.get('content.actionName'),
          target = this.get('controller.target');
      target.send(actionName);
    }
  })
});

上記のコードは確かに正しくありませんが、アイデアはここにあります。

しかし、ルーターはそれを行う正しい方法だと思います。@ghempton による Ember Router の例をご覧になることをお勧めします。ここでは、タブを で定義していますEmber.Router。

Answer 2

次の 2 つのオプションがあります。

1）各タブページには独自のコントローラー、ビューがあり、ルーターでも定義する必要があります

<script type="text/x-handlebars" data-template-name="tabs"> 
    <div> 
      <ul class="nav nav-tabs"> 
        {{#view Bootstrap.TabItem item="info"}} 
          <a {{action gotoInfo}}>Info</a> 
        {{/view}} 
        {{#view Bootstrap.TabItem item="anamnese"}} 
          <a {{action gotoAnamnese}}>Anamnese</a> 
        {{/view}} 
        {{#view Bootstrap.TabItem item="medication"}} 
          <a {{action gotoMedication}}>Medication</a>  
        {{/view}} 
      </ul> 
      {{outlet}} 
    </div> 
</script>      

Bootstrap.TabItem = Ember.View.extend({
    tagName: 'li',
    classNameBindings: ['isActive:active'],

    isActive: function() {
        return this.get('item') === this.get('controller.selectedTab');
    }.property('item', 'controller.selectedTab').cacheable()
}); 

2) すべてのタブページは 1 つの大きなビューにあり、タブページは非表示または表示されます

{{#view Ember.TabContainerView currentView="info"}}
  <ul class="nav nav-tabs">
    {{#view Bootstrap.TabView value="info"}}<a>Info</a>{{/view}}
    {{#view Bootstrap.TabView value="anamnese"}}<a>Anamnese</a>{{/view}}
    {{#view Bootstrap.TabView value="medication"}}<a>Medication</a>{{/view}}
  </ul>
  {{#view Ember.TabPaneView viewName="info"}}
  {{view EEPD.InfoView}}
  {{/view}}
  {{#view Ember.TabPaneView viewName="anamnese"}}
  {{view EEPD.AnamneseView}}
  {{/view}}
  {{#view Ember.TabPaneView viewName="medication"}}
  {{view EEPD.MedicationView}}
  {{/view}} 
{{/view}}

Bootstrap.TabView = Ember.TabView.extend({
    tagName: 'li',
    classNameBindings: ['isActive:active'],

    isActive: function() {
        return this.get('value') === this.get('tabsContainer.currentView');
    }.property('tabsContainer.currentView').cacheable()
});

Answer 3

タブ パネルを実装するには 2 つの方法があります。

タブをブックマーク可能にしたい場合は、Router を使用して実装する必要があります。

テンプレート

<script type="text/x-handlebars" data-template-name="application">  
  <div class="tabpanel">
    <div class="tabs">
      <div {{action "goToFirstTab"}}>First tab</div>
      <div {{action "goToSecondTab"}}>Second tab</div>
    </div>
    {{outlet}}
  </div>
</script> 

<script type="text/x-handlebars" data-template-name="firstTab">
  First Tab content
</script>

<script type="text/x-handlebars" data-template-name="secondTab">
  Second Tab content
</script>

コード:

var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend();
App.FirstTabView = Ember.View.extend({templateName: "firstTab"});
App.FirstTabController = Ember.Controller.extend();
App.SecondTabView = Ember.View.extend({templateName: "secondTab"});
App.SecondTabController = Ember.Controller.extend();
App.Router = Ember.Router.create({
  root: Ember.Route.extend({
    goToFirstTab: Ember.Route.transitionTo("firstTab"),
    goToSecondTab: Ember.Route.transitionTo("secondTab"),
    index: Ember.Route.extend({
      route: "/",
      redirectsTo: "firstTab"
    }),
    firstTab: Ember.Route.extend({
      route: "/firstTab",
      connectOutlets: function (router) {
        router.get('applicationController').connectOutlet('firstTab');
      }
    }),
    secondTab: Ember.Route.extend({
      route: "/secondTab",
      connectOutlets: function (router) {
        router.get('applicationController').connectOutlet('secondTab');
      }      
    })    
  })
});
App.initialize(App.Router);

2 番目の方法は、ルーターを使用しません。

テンプレート(アクションのターゲットが変更されていることに注意してください)

<script type="text/x-handlebars" data-template-name="application">  
  <div class="tabpanel">
    <div class="tabs">
      <div {{action "goToFirstTab" target="controller"}}>First tab</div>
      <div {{action "goToSecondTab" target="controller"}}>Second tab</div>
    </div>
    {{outlet}}
  </div>
</script> 

<script type="text/x-handlebars" data-template-name="firstTab">
  First Tab content
</script>

<script type="text/x-handlebars" data-template-name="secondTab">
  Second Tab content
</script>

コード(タブに関連するコードが ApplicationController.

var App = Ember.Application.create();
App.ApplicationView = Ember.View.extend();
App.Router = Ember.Route.create();
App.FirstTabView = Ember.View.extend({templateName: "firstTab"});
App.FirstTabController = Ember.Controller.extend();
App.SecondTabView = Ember.View.extend({templateName: "secondTab"});
App.SecondTabController = Ember.Controller.extend();
App.ApplicationController = Ember.Controller.extend({
  view: App.FirstTabView.create(),
  goToFirstTab: function () {
    this.connectOutlet("firstTab");
  },
  goToSecondTab: function () {
    this.connectOutlet("secondTab");
  }
});
App.initialize(App.Router);