Ember 屬性傳遞

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

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

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

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

2，位置參數(shù)

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

準備工作：

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

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

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


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

準備需要顯示的數(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.  }
        ];

       
    }
});

在組件類中指定位置參數(shù)的名稱。

  appcomponentspadding-properties-to-component.js


import Ember from 'ember';


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

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

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

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


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

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

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

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

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


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

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

  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];  獲取第一個參數(shù)
    }),
    body Ember.computed('params.[]', function() {
        return this.get('params')[1];  獲取第二個參數(shù)
    }),
    third Ember.computed('params.[]', function() {
        return this.get('params')[2];  獲取第三個參數(shù)
    }),
    fourth Ember.computed('params.[]', function() {
        return this.get('params')[3];  獲取第四個參數(shù)
    })
});

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

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


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

顯示結(jié)果如下：

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

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