EmberJS - 渲染模板

路由用於渲染外部模板到螢幕上，可以透過在路由處理程式中定義

語法

Ember.Route.extend ({
   templateName: 'path'
});

示例

以下示例演示如何渲染一個模板用於顯示資料。建立一個新路由，如前面章節所述。此處我們建立的路由為 posts，並使用以下程式碼開啟

import Ember from 'ember';                   
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config 

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('posts', function() {
      this.route('new');
   });
});

//It specifies Router variable available to other parts of the app

export default Router;   

建立

//link-to is a handlebar helper used for creating links
{{#link-to 'posts'}}Click Here{{/link-to}}
{{outlet}} //It is a general helper, where content from other pages 
   will appear inside this section

使用以下程式碼開啟在

import Ember from 'ember';

export default Ember.Route.extend ({
   templateName: 'posts/new'
});

使用以下程式碼開啟在

<h2>Posts</h2>
Page is rendered by defining templateName property.
{{outlet}}

輸出

執行 ember 伺服器，你將收到以下輸出 −

當你單擊輸出中收到的連結時，它將生成如以下螢幕截圖所示的結果 −