Ember 屬性傳遞

1，傳遞參數到組件上

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

比如上篇Ember.js 入門指南之二十八組件定義的第三點{{component item.pn post=item}}就是通過屬性post把數據傳遞到組件foo-component或者bar-component上。如果在index.hbs中是如下方式調用組件那么渲染之后的頁面是空的。 {{component item.pn}} 請讀者自己修改index.hbs的代碼后演示效果。

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

2，位置參數

傳遞的屬性參數不一定要指定參數的名字。你可以不指定屬性參數的名稱，然后根據參數的位置獲取對應的值，但是要在組件對應的組件類中指定位置參數的名稱。比如下面的代碼：

準備工作：

ember g route passing-properties-to-component
ember g component passing-properties-to-component

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

!-- apptemplatespassing-properties-to-component.hbs  --


{{#each model as item}}
    !-- 傳遞到組件blog-post第一個參數為數據的title值，第二個為body值 --
    {{passing-properties-to-component item.title item.body}}
{{each}}

準備需要顯示的數據。

  approutespadding-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 controllerarticles.  }
        ];

       
    }
});

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

  appcomponentspadding-properties-to-component.js


import Ember from 'ember';


export default Ember.Component.extend({
     指定位置參數的名稱
    positionalParams ['title', 'body']
});

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

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

!--  apptemplatescomponentspassing-properties-to-component.hbs  --


article
    h1{{title}}h1
    p{{body}}p
article

注意：獲取數據的名稱必須要與組件類指定的名稱一致，否則無法正確獲取數據。 顯示結果如下：

Ember還允許你指定任意多個參數，但是組件類獲取參數的方式就需要做點小修改。比如下面的例子：

調用組件的模板

!-- apptemplatespassing-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}}

指定參數名稱的組件類，獲取參數的方式可以Ember.js 入門指南之三計算屬性這章。

  appcomponentspadding-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];  獲取第四個參數
    })
});

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

!--  apptemplatescomponentspassing-properties-to-component.hbs  --


article
    h1{{title}}h1
    p{{body}}p
    pthird {{third}}p
    pfourth {{fourth}}p
article

顯示結果如下：

到此組件參數傳遞的內容全部介紹完畢?？偟膩碚f沒啥難度。Ember中參數的傳遞與獲取方式基本是相似的，比如link-to助手、action助手。

br 博文完整代碼放在Github（博文經過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大?。绻阌X得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力！！