0

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

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

这是Angular的工作小提琴。我希望有人可以帮助我，因为我找到的帮助很少。

4

2 回答 2

0

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

于 2012-11-20T13:23:01.690 回答
0

以最简单的形式，您可以使用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>
​
于 2012-11-20T13:33:01.193 回答