Ember 屬性傳遞

1，傳遞參數(shù)到組件上

每個(gè)組件都是相對(duì)獨(dú)立的，因此任何組件所需的數(shù)據(jù)都需要通過(guò)組件的屬性把數(shù)據(jù)傳遞到組件中。

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

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

2，位置參數(shù)

傳遞的屬性參數(shù)不一定要指定參數(shù)的名字。你可以不指定屬性參數(shù)的名稱(chēng)，然后根據(jù)參數(shù)的位置獲取對(duì)應(yīng)的值，但是要在組件對(duì)應(yīng)的組件類(lèi)中指定位置參數(shù)的名稱(chēng)。比如下面的代碼：

準(zhǔn)備工作：

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

調(diào)用組件的模板，傳入兩個(gè)位置參數(shù)，分別是item.title、item.body。

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


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

準(zhǔn)備需要顯示的數(shù)據(jù)。

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

       
    }
});

在組件類(lèi)中指定位置參數(shù)的名稱(chēng)。

  appcomponentspadding-properties-to-component.js


import Ember from 'ember';


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

注意：屬性positionalParams指定的參數(shù)不能在運(yùn)行期改變。

組件直接使用組件類(lèi)中指定的位置參數(shù)名稱(chēng)獲取數(shù)據(jù)。

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


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

注意：獲取數(shù)據(jù)的名稱(chēng)必須要與組件類(lèi)指定的名稱(chēng)一致，否則無(wú)法正確獲取數(shù)據(jù)。 顯示結(jié)果如下：

Ember還允許你指定任意多個(gè)參數(shù)，但是組件類(lèi)獲取參數(shù)的方式就需要做點(diǎn)小修改。比如下面的例子：

調(diào)用組件的模板

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


{{#each model as item}}
    !-- 傳遞到組件blog-post第一個(gè)參數(shù)為數(shù)據(jù)的title值，第二個(gè)為body值 --
    {{passing-properties-to-component item.title item.body 'third value' 'fourth value'}}
{{each}}

指定參數(shù)名稱(chēng)的組件類(lèi)，獲取參數(shù)的方式可以Ember.js 入門(mén)指南之三計(jì)算屬性這章。

  appcomponentspadding-properties-to-component.js


import Ember from 'ember';


export default Ember.Component.extend({
     指定位置參數(shù)為參數(shù)數(shù)組
    positionalParams 'params',
    title Ember.computed('params.[]', function() {
        return this.get('params')[0];  獲取第一個(gè)參數(shù)
    }),
    body Ember.computed('params.[]', function() {
        return this.get('params')[1];  獲取第二個(gè)參數(shù)
    }),
    third Ember.computed('params.[]', function() {
        return this.get('params')[2];  獲取第三個(gè)參數(shù)
    }),
    fourth Ember.computed('params.[]', function() {
        return this.get('params')[3];  獲取第四個(gè)參數(shù)
    })
});

下面看組件是怎么獲取傳遞過(guò)來(lái)的參數(shù)的。

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


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

顯示結(jié)果如下：

到此組件參數(shù)傳遞的內(nèi)容全部介紹完畢?？偟膩?lái)說(shuō)沒(méi)啥難度。Ember中參數(shù)的傳遞與獲取方式基本是相似的，比如link-to助手、action助手。

br 博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能有出入，不過(guò)影響不大?。?，如果你覺(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力?。?/p>