Question

我正在研究Ember，我想知道是否可以在一个页面中包含多个视图并在布局模板之间切换。我以前开发过AngularJS。

我正在搜索与此$route.when('/view1', ...);和<ng-include src="templates.top" />相同的Ember。

这是Angular的工作fiddle。我希望有人可以帮助我，因为我找不到任何帮助。

Answer 1

你在想的是Ember.js路由器，顶部是Handlebars.js模板。 Here是一本很好的指南，涵盖了入门所需的一切。阅读并理解本教程可能需要一些时间。

Answer 2

以最简单的形式，您可以使用StateManager。请参阅我创建的以下小提琴：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>

Ember的多个视图

2 个答案: