Target
Use Emberjs to make a simple TODO application, to achieve an effect: by entering text in a text box, creating an agent item, the agent can select priority, and the completed items can be deleted.
Ready to
To complete this application, you need to do some preparation:
1, create an HTML page, temporarily regardless of style;
2, Script: Emberjs,handlebars, JQuery. These three scripts are available online and we'll add them to the head tag.
Making
Create the page, add the script, and you can start making the application. The HTML code is as follows:
Copy Code code as follows:
<!doctype html>
<meta charset= "Utf-8" >
<title>ember--First Application </title>
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" >< /script>
<script type= "Text/javascript" src= "http://cloud.github.com/downloads/wycats/handlebars.js/ Handlebars-1.0.rc.1.js "></script>
<script type= "Text/javascript" src= "http://cloud.github.com/downloads/emberjs/ember.js/ Ember-1.0.0-pre.2.min.js "></script>
<body>
</body>
In accordance with Ember requirements, you need to create an application instance with Ember.Application.create (), which also serves as the namespace for the application. This create method can pass an object attribute ready, which is a function called when the application is ready. Ember can also be replaced with abbreviated EM.
There is a Em.logger object in the Ember, equivalent to Window.console, which can be used for debugging. We can add a message to this ready and display it in the console.
Now, add a script tag to the head tag to write the application scripts, instantiate a Ember application, and add the area of the MVC module. The script code is as follows:
Copy Code code as follows:
/********************
Application
********************/
Window. APP = Ember.Application.create (
{
Ready:function () {
Em.Logger.info (' Welcome to Service application ');
}
}
);
/********************
Model
********************/
/********************
View
********************/
/********************
Controlle
********************/
Then, we need an input box to enter the agent, and we need to create a Ember text box view. The Ember view can be created by using the Ember.view class (using the Create method) or by extending (using the Extend method) a new view class. For the text box view, however, Ember provides a more straightforward way to--ember.textfield classes, which we can use to extend a custom view and then instantiate it to add to the page. We'll name the text box view class Additemview.
Add the text box view code to the view area in your scripting code:
Copy Code code as follows:
App.additemview = Ember.TextField.extend ({
});
can give it a hint language, HTML5 support placeholder, you can use. You also need to add content to the list of representative items when you press ENTER, which requires a property: Insertnewline, which calls the corresponding function when you press ENTER. The following code is added:
Copy Code code as follows:
App.additemview = Ember.TextField.extend ({
Placeholder: ' Enter to-do ',
Insertnewline:function () {}
});
The function body is not written for the time being, since it is not yet certain how to add it.
When the user presses ENTER to add a charge, need a list to display, in Ember can create CollectionView to hold the list item view, for CollectionView, there will be a content attribute for the list item object, Its property value is an array. In order for its list to appear as a list of UL, you need to define the CollectionView label name (TagName) as "ul". We name this list view ListView and add it to the bottom of the text box view. The final code is as follows:
Copy Code code as follows:
App.listview = Ember.CollectionView.extend ({
Content:[],
TagName: ' UL '
});
Now if you open the page, there is no content, because the view has not been rendered, to display the view, you need handlebar template support.
Now to modify the body block of the HTML page, add the two views just created to see the effect.
The way to add a handlebar template is to <script type= text/x-handlebars >/* View Assistant */</script>, and you can also specify a template name. defined in the Data-template-name attribute, we will need to add a list item later.
In the template you need to add a view through the View Helper (helper), which is also very simple, with two curly braces on the package, which specifies the view to display through the template keyword, such as: {View App.additemview}}. Other template assistants can be found on the handlebar Web site: http://handlebarsjs.com/.
Now add the text box and List view to the page, the modified body code is as follows:
Copy Code code as follows:
<body>
<script type= "Text/x-handlebars" >
<span> Please enter the To-do item: </span>{{view app.additemview}}<br/>
{{View App.listview}}}
</script>
</body>
Now refresh the page and display a "Please input agent" with a text box, the list will not display because there is no content.
This time we can add a bit of content, such as content:[' a ', ' B ', ' C ', and then refresh the page, and you'll see that there are only three dots in the list area (if you don't reset the list style). Because you added three items to the content, the list item did not specify a template to display, so the display is empty. In order for you to see the effect, let's define a template to display for the list item. There are two places to deal with, the first is to add a template with the specified name on the page, and the second is to define the properties of the list item in the list view.
To define a list item, you need to use Itemviewclass, which passes each content item in and displays it with the specified template. To modify the list view first, add the Itemviewclass attribute to it, which is also a view, ListView So it needs to be created with Ember.view, and the name of the template to be displayed at the time of creation is ItemTemplate, which will also be in the handlebar template name that appears in HTML. The modified code is as follows:
Copy Code code as follows:
App.listview = Ember.CollectionView.extend ({
Content:[' A ', ' B ', ' C ',
TagName: ' ul ',
ItemViewClass:Ember.View.extend ({
templatename: ' ItemTemplate ',
})
});
The next step is complete, now to modify the HTML, we need to create a new handlebar template in the body, and will use the template name given above, the code is as follows:
Copy Code code as follows:
<script type= "Text/x-handlebars" data-template-name= "ItemTemplate" >
</script>
Then the same is the Add Template Assistant, to pass each content item to the assistant, will use View.content. Add the following code:
Copy Code code as follows:
<script type= "Text/x-handlebars" data-template-name= "ItemTemplate" >
{{view.content}}}
</script>
When finished, refresh the page, and now finally the contents of the content display, and the template will automatically add the Li tag.
Continue to refine our application. We can't always write content in a fixed bar, so how users can add it. So now consider saving the item that the user is adding to an array, and then content to fetch the contents of the array itself. At the same time, the Ember framework supports two-way binding, and when the contents of an array are modified, the content that is bound is changed simultaneously, and vice versa. Now, create a ember array and bind to the content.
The ember array can be created by the Arraycontroller class, which transforms the normal JavaScript you pass into a new Ember array object, and we name the array to manage the project as Todostore, Put it in the controller area of the HTML page and create the following code:
Copy Code code as follows:
App.todostore = Ember.ArrayController.create ({
Content:[]
});
Now you can put the content array in the ListView into this Todostore array, and then bind the content in ListView to the Todostore, and the two objects will be modified to look like the following:
Copy Code code as follows:
App.listview = Ember.CollectionView.extend ({
Contentbinding: ' App.todostore ',
TagName: ' ul ',
ItemViewClass:Ember.View.extend ({
templatename: ' ItemTemplate '
})
});
/********************
Controlle
********************/
App.todostore = Ember.ArrayController.create ({
Content:[' A ', ' B ', ' C '
});
Binding is a suffix that represents a binding, a property value that is a bound object, and the content property of the object is taken by default. Refresh the page after the modification is complete, and if you see a page that is the same as before the modification, the modification is successful. Then it's time to get rid of the value in the content, and the data we need will be entered by the user in the text box.
Consider the current interaction process, the user in the text box input, press ENTER, the program to obtain the event, call a method to create a new object, and then give the new object to Todostore, because of binding, the list will automatically add an item.
It's time to change the text box view, remember Insertnewline? We can create a new project here. We will use three methods: Set () sets the property value, get () Gets the property value, Pushobject () to add the data, modifies the Additemview code as follows:
Copy Code code as follows:
App.additemview = Ember.TextField.extend ({
Placeholder: ' Enter to-do ',
Insertnewline:function () {
var item = this.get (' value ');
App.todoStore.pushObject (item);
This.set (' value ', ');
}
});
Now refresh the page, and then enter the content, press ENTER, the list will add the content, indicating the success of the modification, if you do not have the content of the contents of the Todostore empty, now there will be 4 list items.
Half the distance from our goal, we still lack two features: Select priority and delete completed items.
To add a drop-down list, you can use another convenient view: Ember.select. We can simply create one directly in the template, bind the content of the Drop-down list view to another Ember object, and then set the default selected priority. The priority also needs to be binding, so that when selected on the page, the contents of the corresponding Ember object are modified at the same time. To create this Ember object, customize the object's selected property to indicate the selected value, and the other names will be added below the Todostore object, named Selectcontroller, as follows:
Copy Code code as follows:
App.selectcontroller = Ember.Object.create ({
Selected: ' Low ',
content:[' high ', ' Medium ', ' low '
});
Then add a template helper and bind the corresponding properties in the Selectcontroller, select the binding needs to use the selectionbinding, by the way a text hint, and then add to the text box template below, the modified code is as follows:
Copy Code code as follows:
<script type= "Text/x-handlebars" >
<span> Please enter the To-do item: </span>{{view app.additemview}}<br/>
<span> Please select priority: </span>{{view ember.select contentbinding= "App.selectController.content" Selectionbinding= "App.selectController.selected"}}
{{View App.listview}}}
</script>
The Drop-down list will now appear when you refresh the page.
It's going to take some work to get the list item to appear in this priority. It is time to use model, we have to create a model class, when pressed enter, from this class to create an instance, and then throw the instance into the Todostore can be, in addition, the template also to follow the changes, the text box view of the creation method also have to change. This change is a little bit more. In addition, a function of the computed property is used, which is automatically updated when dependent properties change. Name this model Todomodel, put it in the model area and create the code as follows:
Copy Code code as follows:
/********************
Model
********************/
App.todomodel = Em.Object.extend ({
Status: ',
Value: ',
Title:function () {
Return ' [' +this.get (' status '] + '] ' +this.get (' value ');
}.property (' status ', ' value ')
});
The status represents the priority of the selection, value represents the values in the text box, and the title represents the content to be displayed by the list item, which is customized. Where title does not need to be provided, because it is set to compute properties, depends on the status and value attribute, automatic calculation is obtained, the property () method is the Ember function to calculate the property of the method, followed by the argument of the title dependent properties, When status or value changes, it is automatically given.
Then modify the Additemview insertnewline properties, you need to get two data, one is the text box content, one is the Drop-down list of selected items. The value of the text box already knows how to get the value of the Drop-down list? Don't forget that we've bound the selected item to the selected attribute in Selectcontroller, just take it from there. The modified Additemview code is as follows:
Copy Code code as follows:
App.additemview = Ember.TextField.extend ({
Placeholder: ' Enter to-do ',
ElementID: ' Add ',
Insertnewline:function () {
var item = App.TodoModel.create ({
Status:App.selectController.get (' selected '),
Value:this.get (' value ')
});
App.todoStore.pushObject (item);
This.set (' value ', ');
}
});
Now you can instantiate a to-do item and add it to the Todostore through the Todomodel class, and finally modify the template ItemTemplate for the project list to display the title value of the current item in the template, as shown in the following code:
Copy Code code as follows:
<script type= "Text/x-handlebars" data-template-name= "ItemTemplate" >
{{View.content.title}}}
</script>
The new to-do item that you add now displays the priority.
OK, last feature, delete. As opposed to adding pushobject, the deletion uses Removeobject. Because it is displayed in each list item, so you need to modify the Itemviewclass and ItemTemplate template, we add a method in Itemviewclass, when the user clicks on the call, the method is named RemoveItem, the code is as follows:
Copy Code code as follows:
App.listview = Ember.CollectionView.extend ({
Contentbinding: ' App.todostore ',
TagName: ' ul ',
ItemViewClass:Ember.View.extend ({
templatename: ' ItemTemplate ',
Removeitem:function () {this.getpath (' contentview.content '). Removeobject (This.get (' content '));
})
});
Finally, add a link to the ItemTemplate template with the action Assistant, the first parameter is the method name, the target attribute is used to specify the object, and when clicked, the method under the specified object is invoked. The modified ItemTemplate code is as follows:
Copy Code code as follows:
<script type= "Text/x-handlebars" data-template-name= "ItemTemplate" >
{{View.content.title}} <a href= ' # ' {{action RemoveItem target= ' This '}} >X</a>
</script>
Now the newly added item will have a fork on the right side, and the current item will be deleted when clicked.
Finally can do some improvement, when the mouse is moved to the item to show the deletion link, complete this function, need to modify itemviewclass and in the template to add logic to judge assistant {{#if}}. You can try to do it yourself, or you can look at the final complete code.
Copy Code code as follows:
Full code
<!doctype html>
<meta charset= "Utf-8" >
<title>ember--First Application </title>
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" >< /script>
<script type= "Text/javascript" src= "http://cloud.github.com/downloads/wycats/handlebars.js/ Handlebars-1.0.rc.1.js "></script>
<script type= "Text/javascript" src= "http://cloud.github.com/downloads/emberjs/ember.js/ Ember-1.0.0-pre.2.min.js "></script>
<script>
/********************
Application
********************/
Window. APP = Ember.Application.create (
{
Ready:function () {
Em.Logger.info (' Welcome to Service application ');
}
}
);
/********************
Model
********************/
App.todomodel = Em.Object.extend ({
Status: ',
Value: ',
Title:function () {
Return ' [' +this.get (' status '] + '] ' +this.get (' value ');
}.property (' status ', ' value ')
});
/********************
View
********************/
App.additemview = Ember.TextField.extend ({
Placeholder: ' Enter to-do ',
ElementID: ' Add ',
Insertnewline:function () {
var item = App.TodoModel.create ({
Status:App.selectController.get (' selected '),
Value:this.get (' value ')
});
App.todoStore.pushObject (item);
This.set (' value ', ');
}
});
App.listview = Ember.CollectionView.extend ({
Contentbinding: ' App.todostore ',
TagName: ' ul ',
ItemViewClass:Ember.View.extend ({
templatename: ' ItemTemplate ',
Removeitem:function () {this.getpath (' contentview.content '). Removeobject (This.get (' content '));
Mouseenter:function () {this.set (' hover ', true);
Mouseleave:function () {this.set (' hover ', false);}
})
});
/********************
Controlle
********************/
App.todostore = Ember.ArrayController.create ({
Content:[]
});
App.selectcontroller = Ember.Object.create ({
Selected: ' Low ',
content:[' high ', ' Medium ', ' low '
});
</script>
<body>
<script type= "Text/x-handlebars" >
<span> Please enter the To-do item: </span>{{view app.additemview}}<br/>
<span> Please select priority: </span>{{view ember.select contentbinding= "App.selectController.content"
Selectionbinding= "App.selectController.selected"}}
{{View App.listview}}}
</script>
<script type= "Text/x-handlebars" data-template-name= "ItemTemplate" >
{{View.content.title}} {{#if view.hover}}<a href= ' # ' {{action RemoveItem target= ' This '}} >x</a>{{/if}}
</script>
</body>
