Ember 包裹內(nèi)容

準(zhǔn)備工作：

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

有些情況下，你需要定義一個包裹其他模板提供的數(shù)據(jù)的組件。比如下面的例子：

<h2>{{title}}</h2>
<div class='body'>{{body}}</div>

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

{{wrapping-content-in-component title=model.title body=model.body}}

調(diào)用組件，傳入兩個指定名稱的參數(shù)，更多有關(guān)組件參數(shù)傳遞問題請看Ember.js 入門指南之二十九屬性傳遞。

下面在route中增加一些測試數(shù)據(jù)。

//  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' };
    }
});

如果程序代碼沒寫錯，界面應(yīng)該會顯示如下信息。

在上述例子中組件正常顯示出model回調(diào)中初始化的數(shù)據(jù)。但是如果你定義的組件需要包含自定義的HTML內(nèi)容呢？？

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

為了能使用塊方式傳遞模板到組件中，在調(diào)用組件的時候必須使用#開始的方式（兩種調(diào)用方式：{{component-name}}或者{{#component-name}}……{{/component-name}}），注意一定要有關(guān)閉標(biāo)簽！

稍加改造前面的例子，這時候不只是傳遞一個簡單的數(shù)據(jù)，而是傳入一個包含HTML標(biāo)簽的簡單模板。

<h2>{{title}}</h2>


<div class='body'>{{yield}}</div>

注意此時div標(biāo)簽內(nèi)使用的是{{yield}}助手，而不是直接使用{{body}}。

下面是調(diào)用組件的模板。

{{!wrapping-content-in-component title=model.title body=model.body}}


{{#wrapping-content-in-component title=model.title}}
    {{model.body}}
    <small>by {{model.author}}</small>
{{/wrapping-content-in-component}}

頁面加載之后效果如下：

查看頁面HTML源代碼，可以看到在