Ember 的多个视图答案

【问题标题】：Multiple views with EmberEmber 的多个视图
【发布时间】：2012-11-20 21:33:01
【问题描述】：

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

我正在寻找与 $route.when('/view1', ...); 和 <ng-include src="templates.top" /> 等效的 Ember。

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

【问题讨论】：

类似this（来源here）？
@MilkyWayJoe 多么棒的演示，从您的代码中学到了一些很酷的新东西！非常感谢！

标签： templates layout ember.js multiple-views

【解决方案1】：

在最简单的形式中，您可以使用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>

【讨论】：

是否可以将数据模板排除在单独的 HTML 文件中？我想以每个数据模板都是一个单独的应用程序的方式使用这个概念。然后，我想根据需要将这些应用程序包含到我的页面中。
Afaik 不，但是请看这个问题：stackoverflow.com/questions/8615603/…

【解决方案2】：

您想到的是 Ember.js 路由器，顶部带有 Handlebars.js 模板。 Here 是一个很好的指南，它涵盖了您入门所需的一切。通读和理解本教程可能需要一些时间。

【讨论】：