Ember.js 入門指南——屬性傳遞

出處：http://blog.ddlisting.com/2016/04/07/ember-js-ru-men-zhi-nan-zhi-er-shi-jiu-shu-xing-chuan-di/

1，傳遞參數到組件上    

每一個組件都是相對獨立的，所以任何組件所需的數據都須要經過組件的屬性把數據傳遞到組件中。

       好比上篇《Ember.js 入門指南——組件定義》的第三點「{{component item.pn post=item}}」就是經過屬性post把數據傳遞到組件foo-component或者bar-component上。若是在index.hbs中是以下方式調用組件那麼渲染以後的頁面是空的。

{{component item.pn}}

請讀者本身修改index.hbs的代碼後演示效果。

       傳遞到組件的參數也是動態更新的，當傳遞到組件上的參數變化時組件渲染的HTML也會隨之發生改變。

2，位置參數

傳遞的屬性參數不必定要指定參數的名字。你能夠不指定屬性參數的名稱，而後根據參數的位置獲取對應的值，可是要在組件對應的組件類中指定位置參數的名稱。好比下面的代碼：

準備工做：

ember g route passing-properties-to-component

ember g component passing-properties-to-component

 

調用組件的模板，傳入兩個位置參數，分別是item.title、item.body。

<!-- app/templates/passing-properties-to-component.hbs  -->
 
{{#each model as |item|}}
       <!-- 傳遞到組件blog-post第一個參數爲數據的title值，第二個爲body值 -->
       {{passing-properties-to-component item.title item.body}}
{{/each}}

準備須要顯示的數據。

//  app/routes/padding-properties-to-component.js
 
import Ember from 'ember';
 
export default Ember.Route.extend({
 
       model: function() {
               return [
                 { id: 1, title: 'Bower: dependencies and resolutions new', body: "In the bower.json file, I see 2 keys dependencies and resolutionsWhy is that so? " },
                 { id: 2, title: 'Highly Nested JSON Payload - hasMany error', body: "Welcome to the Ember.js discussion forum. We're running on the open source, Ember.js-powered Discourse forum software. " },
                 { id: 3, title: 'Passing a jwt to my REST adapter new ', body: "This sets up a binding between the category query param in the URL, and the category property on controller:articles. " }
           ];
         
       }
});

 

在組件類中指定位置參數的名稱。

//  app/components/padding-properties-to-component.js
 
import Ember from 'ember';
 
export default Ember.Component.extend({
       // 指定位置參數的名稱
       positionalParams: ['title', 'body']
});

注意：屬性positionalParams指定的參數不能在運行期改變。

 

組件直接使用組件類中指定的位置參數名稱獲取數據。

<!--  app/templates/components/passing-properties-to-component.hbs  -->
 
<article>
       <h1>{{title}}</h1>
       <p>{{body}}</p>
</article>

注意：獲取數據的名稱必需要與組件類指定的名稱一致，不然沒法正確獲取數據。

顯示結果以下：

 

 

       Ember還容許你指定任意多個參數，可是組件類獲取參數的方式就須要作點小修改。好比下面的例子：

 

調用組件的模板

<!-- app/templates/passing-properties-to-component.hbs  -->
 
{{#each model as |item|}}
       <!-- 傳遞到組件blog-post第一個參數爲數據的title值，第二個爲body值 -->
       {{passing-properties-to-component item.title item.body 'third value' 'fourth value'}}
{{/each}}

 

指定參數名稱的組件類，獲取參數的方式能夠參考計算屬性這章。

//  app/components/padding-properties-to-component.js
 
import Ember from 'ember';
 
export default Ember.Component.extend({
       // 指定位置參數爲參數數組
       positionalParams: 'params',
       title: Ember.computed('params.[]', function() {
              return this.get('params')[0];  //獲取第一個參數
       }),
       body: Ember.computed('params.[]', function() {
              return this.get('params')[1];  //獲取第二個參數
       }),
       third: Ember.computed('params.[]', function() {
              return this.get('params')[2];  //獲取第三個參數
       }),
       fourth: Ember.computed('params.[]', function() {
              return this.get('params')[3];  //獲取第四個參數
       })
});

 

下面看組件是怎麼獲取傳遞過來的參數的。

<!--  app/templates/components/passing-properties-to-component.hbs  -->
 
<article>
       <h1>{{title}}</h1>
       <p>{{body}}</p>
       <p>third: {{third}}</p>
       <p>fourth: {{fourth}}</p>
</article>

顯示結果以下：

 

       到此組件參數傳遞的內容所有介紹完畢。總的來講沒啥難度。Ember中參數的傳遞與獲取方式基本是類似的，好比link-to助手、action助手。