The Ember property is passed

1, pass parameters to the component

Each component is relatively independent, so the data required by any component needs to be passed to the component through its properties.

For example, the third point defined by the twenty-eight components of the Ember.js {{component item.pn post=item}} Getting Started Guide to the last time is to pass data to the foo-component or bar-component post. I f the component is called in index.hbs as follows, the rendered page is empty. {{component item.pn}} code for index.hbs to demonstrate the effect.

The parameters passed to the component are also dynamically updated, and the HTML rendered by the component changes as the parameters passed to the component change.

2, position parameters

The passed property argument does not have to specify the name of the argument. Y ou can not specify the name of the property parameter, and then get the corresponding value based on the location of the parameter, but specify the name of the location parameter in the component class corresponding to the component. For example, the following code:

Preparations:

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

Call the template of the component and pass in two position parameters, 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}}

Prepare the data that needs to be displayed.

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

Specify the name of the location parameter in the component class.

  appcomponentspadding-properties-to-component.js
import Ember from 'ember';
export default Ember.Component.extend({
     指定位置参数的名称
    positionalParams ['title', 'body']
});

Note: The parameters specified by the propertypositional Params cannot be changed during the run time.

The component gets the data directly using the location parameter name specified in the component class.

!--  apptemplatescomponentspassing-properties-to-component.hbs  --
article
    h1{{title}}h1
    p{{body}}p
article

Note: The name of the obtained data must match the name specified by the component class, otherwise the data cannot be obtained correctly. The results are as follows:

Ember also allows you to specify as many parameters as you want, but the way component classes get parameters requires minor modifications. For example, here's an example:

The template that calls the component

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

A component class that specifies the name of a parameter, and the way the parameters are .js the Chapter on Calculating Properties in the Getting Started Guide III.

  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];  获取第四个参数
    })
});

Here's how the component gets the passed parameters.

!--  apptemplatescomponentspassing-properties-to-component.hbs  --
article
    h1{{title}}h1
    p{{body}}p
    pthird {{third}}p
    pfourth {{fourth}}p
article

The results are as follows:

All the contents passed to this component parameter are covered. O n the whole, it's not that difficult. Parameters in Ember are passed and obtained in much the same way, such as link-to assistants, action assistants.

The full code of the br blog post is placed in Github (the blog post has been modified several times, and the code on the blog may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!