Ember form element

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 。

1, 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}}

2, specify 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.

3, 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
});

4, 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!!