0

私は Ember を研究しています。1 つのページに複数のビューを含めて、レイアウト テンプレートを切り替えることができるかどうかを知りたいです。以前にAngularJSで開発したことがあります。

$route.when('/view1', ...);これとに相当する Ember を探してい <ng-include src="templates.top" />ます。

これはAngularの実用的なフィドルです。助けがほとんど見つからなかったので、誰かが私を助けてくれることを願っています。

4

2 に答える 2

0

In it's simplest form, you can use StateManager. Please see the following fiddle I created: http://jsfiddle.net/npCfF/

Javascript:

App= Ember.Application.create();

App.StateManager = Ember.StateManager.create({
    rootElement: '.tab-content',
    initialState: 'tab1', 
    //Show the location tab function
    showTab1: function(manager) {

        manager.transitionTo('tab1');
    },
    //show seleceted areas
    showTab2: function(manager) {

        manager.transitionTo('tab2');
    },
    showTab3: function(manager) {

        this.set('locationActive', 'inactive');
        this.set('areasActive', 'active');
        this.set('filterActive', 'inactive');
        this.set('childOf', 'showAreas');
        manager.transitionTo('tab3');
    },

    tab1: Ember.ViewState.create({
        route: 'tab1',
        view: Ember.View.create({ templateName: 'tab1' })
    }),
    tab2: Ember.ViewState.create({
        route: 'tab2',
        view: Ember.View.create({ templateName: 'tab2' })
    }),
    tab3: Ember.ViewState.create({
        route: 'tab3',
        view: Ember.View.create({ templateName: 'tab3' })
    })
});
​

HTML:

<script type="text/x-handlebars">
      <nav class="tab_menu">
           <span id="tab_location_result" data-show="location_result"  {{action "showTab1" target="App.StateManager"}}><i class="icon-globe"></i>Tab 1</span> | 
           <span id="tab_selected_areas" data-show="selected_areas" {{bindAttr class="MapSearch.StateManager.areasActive"}} {{action "showTab2" target="App.StateManager"}}><i class="icon-map-marker"></i>Tab 2</span> | 
           <span id="tab_filter_results" data-show="filter_results" {{bindAttr class="MapSearch.StateManager.filterActive"}} {{action "showTab3" target="App.StateManager"}}><i class="icon-filter"></i>Tab 3</span>
      </nav>
</script>
<div class="tab-content"></div>
<script type="text/x-handlebars" data-template-name="tab1">
Tab1 
</script>
<script type="text/x-handlebars" data-template-name="tab2">
Tab2
</script>
<script type="text/x-handlebars" data-template-name="tab3">
Tab3
</script>
​
于 2012-11-20T13:33:01.193 に答える
0

あなたが考えているのは、Handlebars.js テンプレートが上にある Ember.js ルーターです。ここに良いガイドがあります。開始するために必要なすべてをカバーしています。チュートリアルを読んで理解するには、時間がかかる場合があります。

于 2012-11-20T13:23:01.690 に答える