May 09, 2021 Ember.js Reference documents
The form elements provided by Ember are encapsulated into
view
A
fter parsing the rendering, a normal HTML tag is generated.
For more details, you can view their implementation source codes:
Ember.TextField,
Ember.Chechbox,
Ember.TextArea.
As a rule, create a
route
ember generate route form-helper
。
input
assistant
{{! //app/templates/form-helper.hbs }}
{{input name="username" placeholder="your name"}}
There are many
input
that you can use on the input assistant, including
readonly
value
disabled
name
and more.
Note: There is a difference
input
using double quote bracketing for properties that are used on the input assistant. F
or example, the value is different after the
value='helloworld'
and
value=helloworld
are rendered, the first is to set the "helloworld" string assignment
value
and the second is to get the value of the variable helloworld from
value
controller
or
route
Look at the demo results of the following 2 lines of code:
{{input name="username" placeholder="your name" value="model.helloworld"}}
<br><br>
{{input name="username" placeholder="your name" value=model.helloworld}}
Modify the
route
override
model
callback, return a string, or you can set the controller class
controller
the template. F
or example, the second piece of code below (use the
ember generate controller form-helper
get the controller class for
controller
template.)
)。
// app/routes/form-helper.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return { helloworld: 'The value from route...' }
}
});
Initialize test data in the
controller
class.
// app/controllers/form-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
helloworld: 'The value from route...'
});
Correspondingly, if you are
controller
initialization test data, then the way your template gets the data is slightly modified. T
he prefix model. needs to
model.
. .
controller
not need to initialize test data in callbacks and can be defined directly
controller
of controller.
{{input name="username" placeholder="your name" value=helloworld}}
input
event on the input assistant
You can imagine that the javascript code we usually write is not
input
on the input input box, and by the
input
function can be used on the input assistant, but in a somewhat different way, see the following example. E
xamples are
enter
to trigger a specified event, losing focus to trigger an event, and so on. F
irst write
input
input box, get the value of the
input
input box is a bit out of common sense.
Getting
controller
of the input input box in the
input
class is obtained by the value property
value
double quotes.
按enter键触发
{{input value=getValueKey enter="getInputValue" name=getByName placeholder="请输入测试的内容"}}
// app/controllers/form-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
getInputValue: function() {
var v = this.get('getValueKey');
console.log('v = ' + v);
var v2 = this.get('getByName');
console.log('v2 = ' + v2);
}
}
});
After entering the test content,
enter
The final output was a little unexpected.
v
value of v is
v2
undefined
I
t is
controller
value of the page obtained at the
value
name
I
t's a little
input
from our usual HTML input!!
This needs attention.
checkbook
assistant
checkbox
a form element, is also encapsulated by Ember and used as a component.
The use of procedures requires the same attention
input
and whether properties use double quotes does not work the same way.
checkbox{{input type="checkbox" checked=isChecked }}
You can
controller
property
isChecked
set it
true
checkbox
will be selected by default.
// app/controllers/form-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
// ……
},
isChecked: true
});
textarea
assistant
{{textarea value=key cols="80" rows="3" enter="getValueByV"}}
The value entered
value
obtained through the value property.
This article briefly describes the commonly used form elements, the use of a relatively simple way, the only thing to note is that the input box input values obtained in a somewhat different way than the usual HTML form elements used. O
thers are basically no different from ordinary HTML form elements.
The full code of the blog post
is placed in Github
(the blog post has been modified several times, and the code on the blog post 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!!