May 09, 2021 Ember.js Reference documents
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.
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!!