Ember.js 入門指南——包裹內容

準備工做：

ember g route wrapping-content-in-component-route
       ember g component wrapping-content-in-component

有些狀況下，你須要定義一個包裹其餘模板提供的數據的組件。好比下面的例子：

<!--  app/templates/components/wrapping-content-in-component.hbs  -->
 
<h1>{{title}}</h1>
<div>{{body}}</div>

上述代碼定義了一個普通的組件。

 

<!--  app/templates/wrapping-content-in-component-route.hbs  -->
 
{{wrapping-content-in-component title=model.title body=model.body}}

       調用組件，傳入兩個指定名稱的參數，更多有關組件參數傳遞問題請看《Ember.js 入門指南——屬性傳遞》。

 

下面在route中增長一些測試數據。

//  app/routes/wrapping-content-in-component-route.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
       model: function() {
              return { id: 1, title: 'test title', body: 'this is body ...', author: 'ubuntuvim' };
       }
});

若是程序代碼沒寫錯，界面應該會顯示以下信息。

    在上述例子中組件正常顯示出model回調中初始化的數據。可是若是你定義的組件須要包含自定義的HTML內容呢？？

       除了上述這種簡單的數據傳遞以外，Ember還支持使用block form（塊方式），換句話說你能夠直接傳遞一個模板到組件中，並在組件中使用{{yield}}助手顯示傳入進來的模板。

       爲了能使用塊方式傳遞模板到組件中，在調用組件的時候必須使用「#」開始的方式（兩種調用方式：{{component-name}}或者{{#component-name}}……{{/component-name}}），注意必定要有關閉標籤！

       稍加改造前面的例子，這時候不僅是傳遞一個簡單的數據，而是傳入一個包含HTML標籤的簡單模板。

<!--  app/templates/components/wrapping-content-in-component.hbs  -->
 
<h1>{{title}}</h1>
<!--  模板編譯渲染以後{{yield}}助手會被組件標籤wrapping-content-in-component包含的內容替換掉 -->
<div>{{yield}}</div>

    注意此時div標籤內使用的是{{yield}}助手，而不是直接使用{{body}}。

     下面是調用組件的模板。

<!--  app/templates/wrapping-content-in-component-route.hbs  -->
 
{{!wrapping-content-in-component title=model.title body=model.body}}
<!--  調用組件的方式必須是以標籤的形式，
       模板編譯渲染以後small標籤和{{body}}這兩行的內容會渲染到組件wrapping-content-in-component的{{yield}}助手上  -->
{{#wrapping-content-in-component title=model.title}}
       {{model.body}}
       <small>by {{model.author}}</small>
{{/wrapping-content-in-component}}

 

頁面加載以後效果以下：

查看頁面HTML源代碼，能夠看到在<div class=」body」>這個標籤內的內容確實是調用組件wrapping-content-in-component傳入進來的簡單HTML模板。你能夠把{{#wrapping-content-in-component}}……{{/wrapping-content-in-component}}中間的內容當作是一個參數理解。

 

       到此組件包裹內容的知識點介紹完畢，內容不多也比較簡單！若是有疑問請給我留言或者直接看官方教程。