Home >Web Front-end >JS Tutorial >Explore Emberjs to make a simple Todo application_javascript tips

Explore Emberjs to make a simple Todo application_javascript tips

WBOYOriginal: 2016-05-16 17:48:431143browse

Goal
Use Emberjs to make a simple Todo application to achieve the following effect: Create a to-do item by entering text in the text box. The to-do item can be prioritized and completed items can be deleted.

Preparation
To complete this application, you need to make some preparations:
1. Create an html page, regardless of the style for now;
2. Script: emberjs, handlebars, jQuery. These three scripts are available online and we will add them to the head tag.

Production
Create a page, add scripts, and start making applications. The html code is as follows:

Copy code The code is as follows:

Ember--the first application

. You can also specify the template name in data-template-name Defined in the attribute, we will need it later when we add list items.

In the template, you need to add a view through the view helper (helper). The syntax is also very simple. Use two curly braces to wrap it, and use the template keyword to specify the view to be displayed, such as: {{view App.AddItemView}}. Other template helpers can be found on the handlebar website: http://handlebarsjs.com/.

Now add the text box and list view to the page. The modified body code is as follows:

Copy code The code is as follows:

Now refresh the page, and a sentence "Please enter to-do items" and a text box will be displayed. The list will not be displayed because it has no content.

At this time we can add some content to the content, such as content:['a','b','c'], and then refresh the page. You will find that there are only three small black dots in the list area ( If you haven't reset the list style). Because you added three items to the content, but the list item has not specified a display template, the display is empty. In order for you to see the effect, let's define a display template for the list items. There are two things to deal with here. The first is to add a template with a specified name to the page, and the second is to define the attributes of the list items in the list view.

To define list items, you need to use itemViewClass, which will pass each content item in and display it using the specified template. Let's first modify the list view ListView and add the itemViewClass attribute to it. This is also a view, so it needs to be created with Ember.View. When creating, specify the name of the template used to display as itemTemplate. This name will also be used to appear in the In the handlebar template name of html. The modified code is as follows:

Copy the code The code is as follows:

 
App.ListView = Ember.CollectionView.extend({ 
content:['a','b','c'], 
tagName:'ul', 
itemViewClass: Ember.View.extend({ 
templateName:'itemTemplate', 
}) 
}); 

There is only one step left to complete. Now to modify the html, we need to create a new one in the body handlebar template, and will use the template name given above, the code is as follows:

Copy the code The code is as follows:

Then the template assistant is also added. To pass each content item to the assistant, view.content will be used. Add the following code:

Copy the code The code is as follows:

After completion, refresh the page. Now the content in the content is finally displayed, and the template will automatically add the li tag.

Continue to improve our app. We can't write the content as fixed, so how can users add it? So, now consider saving the items that the user wants to add into an array, and then content itself gets the contents of this array. At the same time, the ember framework supports two-way binding. When the array content is modified, the bound content will also change at the same time, and vice versa. Now, create an ember array and bind it to content.

The ember array can be created through the ArrayController class, which will convert the ordinary javascript you pass in into a new ember array object. We name the array used to manage the project todoStore and put it on the html page In the controller area, the created code is as follows:

Copy code The code is as follows:

 
App .todoStore = Ember.ArrayController.create({ 
content:[] 
}); 

Now you can put the content array in the ListView into the todoStore array , and then bind the content in the ListView to the todoStore. The two objects will be modified as follows:

Copy code The code is as follows:

 
App.ListView = Ember.CollectionView.extend({ 
contentBinding:'App.todoStore', 
tagName:'ul', 
itemViewClass: Ember.View.extend({ 
templateName:'itemTemplate' 
}) 
}); 

/******************** 
controls 
*****************/ 
App.todoStore = Ember.ArrayController .create({ 
content:['a','b','c'] 
}); 

Binding is a suffix, indicating binding, attribute value It is the bound object, and the content attribute of the object is taken by default. Refresh the page after the modification is completed. If the page you see is the same as before the modification, the modification was successful. Next, it's time to remove the value in content. The data we need will be entered by the user into the text box.

Consider the current interaction process. The user enters content in the text box and presses Enter. The program gets the event, calls a method to create a new object, and then sends the new object to todoStore. Due to binding function, the list will automatically add one item.

It’s time to transform the text box view. Do you remember insertNewline? We can create new projects here. We will use three methods: set() to set attribute values, get() to obtain attribute values, and pushObject() to add data. The code after modifying AddItemView is as follows:

Copy code The code is as follows:

 
App.AddItemView = Ember.TextField.extend({ 
placeholder:'Enter to-do item', 
insertNewline:function(){ 
var item = this.get('value'); 
App.todoStore.pushObject(item); 
this.set('value',''); 
} 
}); 

Now refresh the page, then enter the content and press Enter. The entered content will be added to the list, indicating that the modification is successful. If you did not add the todoStore If the content in the content attribute is cleared, there will now be 4 list items.

We are still halfway to our goal. We still lack two functions: selecting priorities and deleting completed projects.

To add a drop-down list, you can use another convenient view: Ember.Select. We can create one directly in the template, bind the content of the drop-down list view to another ember object through binding, and then set the default selected priority. Priority also needs to be bound, so that when selected on the page, the content in the corresponding ember object will be modified at the same time. First create this ember object and customize the selected attribute of the object to represent the selected value. Other names are also acceptable. This code will be added below the todoStore object and named selectController. The code is as follows:

Copy code The code is as follows:

 
App.selectController = Ember.Object.create({ 
selected:' Low', 
content:['High','Medium','Low'] 
}); 

Then add a template helper and bind it to selectController For the corresponding attributes, selectionBinding is needed to bind the selected items. By the way, give a text tip, and then add it below the text box template. The modified code is as follows:

Copy code The code is as follows:

Now refresh the page and a drop-down list will appear.

If you want the list items to have this priority, you still have to spend some effort. It's time to use the model. Let's create a model class. When you press Enter, create an instance from this class and throw the instance into the todoStore. In addition, the template must also be modified accordingly. The text box view The creation method also needs to be changed. There are quite a few changes this time. In addition, a calculated attribute function will also be used, which will automatically update when the dependent attributes change. Name this model TodoModel, place it in the model area, and create the code as follows:

Copy the code The code is as follows:

 
/******************** 
model 
********************/ 

App.TodoModel = Em.Object.extend({ 
status:'', 
value:'', 
title:function(){ 
return '[' this.get('status') ']' this.get('value'); 
}.property('status','value') 
}); 

status represents the priority of selection, value represents the value in the text box, and title represents the content to be displayed in the list item. These attribute names are all customized. The title does not need to be provided, because it is set as a calculated attribute, relying on the status and value attributes, and is automatically calculated and obtained. The property() method is the method that the ember function converts into a calculated attribute. The following parameters represent the attributes that the title depends on. When status or value When the value changes, it will be given automatically.

Then modify the insertNewline attribute of AddItemView. You need to get two data, one is the content in the text box, and the other is the selected item in the drop-down list. We already know how to get the value of the text box, but what about the value of the drop-down list? Don't forget that we have bound the selected item to the selected property in selectController, just take it from there. The modified AddItemView code is as follows:

Copy the code The code is as follows:

 
App. AddItemView = Ember.TextField.extend({ 
placeholder:'Enter to-do item', 
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',''); 
} 
}); 

You can now instantiate a to-do item through the TodoModel class and add In the todoStore, the final step is to modify the itemTemplate of the item list to display it. In the template, you need to get the title value of the current item to display it. The code is as follows:

Copy code The code is as follows:

New to-do items added will now show priority.

Okay, the last function, delete. Contrary to adding pushObject, deletion uses removeObject. Because it is displayed in each list item, the itemViewClass and itemTemplate templates need to be modified. We add a method in itemViewClass to be called when the user clicks. Name the method removeItem. The code is as follows:

Copy code The code is 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 in the itemTemplate template To add a link that accepts clicks, the action assistant is used. The first parameter is the method name. The target attribute is used to specify the object. When clicked, the method under the specified object is called. The modified itemTemplate code is as follows:

Copy the code The code is as follows: