Emberjs Learning One (environment and first example)

Emberjs Learning One (environment and first example)

Blog: http://www.cnblogs.com/xiangbing/p/emberjs-test.html

Case: http://www.lovewebgames.com/emberjs/example/test1/index.html

Source: Https://github.com/tianxiangbing/emberjs-test

Preparatory work

Home we want to do is download from the Internet Emberjs related files, currently in 1.x version, Ember is to rely on jquery (v1.7.1~2.2.0) and handlebars (v1.x), there is a better way to get these resources, That is, the installation with Bower.bower is simple:

NPM Install-g Bower   

After loading the bower you can use bower to download the resources, for example we want to download jquery 1.9.1 version, we can write this

Bower Install jquery#1.9. 1

It will be in the current directory to build a bower_components directory, the jquery file download to the jquery file directory. We can also publish the GIT project to Bower, and then install from Bower to the local, the method can be seen here http:// blog.fens.me/nodejs-bower-intro/

My case has been posted on bower, you can get it directly with the following command

Bower Install Emberjs-test

Click the Test1 directory under Bower_components to execute

NPM Install

Installation of Grunt-watch for easy development

Download Ember Related Resources

Bower.json:

"Dependencies": {"jquery":"~1.9.1","Ember":"~1.13.10","Handlebars":"~1.3.0","Ember-data":"~1.13.11"}

Perform a view of the bower install resource list bower list

Start an example

Then we have to do a simple example based on these files, we create a new HTML page index.html, reference js file, the code is as follows:

<! DOCTYPE html>
See here I introduced a more in the head livereload.js , this file is grunt watch generated when used, you can dynamically change the page, you can use the Chrome plugin livereload.
Well, after the preparation is done, we can write the template on the homepage, and add the following code to the page:
<script type="text/x-handlebars"> Home </script>
Then create a new JS file, which is named App.js, placed in the JS directory, introduced.
Window. APP = Ember.Application.create ();
You will find nothing on the page and then also reported a mistake in the console:
uncaught error:cannot call ' compile ' without the template compiler loaded. Please load ' ember-template-compiler.js ' prior to calling ' compile '.
The general meaning of this error seems to be that I do not have a ember-template-compiler.js file, but the odd thing is, so the parsing template error, but in the earlier version is not required, may be late in order to remove handlebars so independent out of it, in bower_components/emberThere really is such a file, OK, introduce it.
<script type="Text/javascript"Src="Bower_components/jquery/jquery.min.js"></script><script type="Text/javascript"Src="Bower_components/handlebars/handlebars.min.js"></script><script type="Text/javascript"Src="Bower_components/ember/ember-template-compiler.js"></script><script type="Text/javascript"Src="Bower_components/ember/ember.min.js"></script><script type="Text/javascript"Src="Js/app.js"></script>
Well, the page finally appears, and then we add it to the template outlet , which is a portal to the other modules, and then we add other module routes to the App.js.
App.Router.map (function () {    this. Resource ('add', {path:')  Add'});
Here you can use the resource or directly with the route
this. Route ('add')
It is said that the difference between them is that resource can have sub-routes, but the route is the smallest route, so it can be understood that the big class with Recource, the ultimate use of the route, you happy good. Then we add the template, where the template ID of add will be the same as the link-to parameter, and with the first parameter of resource or route, the path parameter refers to the hash value in the URL.
 <script type= text/x-handlebars   id="   Add   ><table><tr> <td> title </td> <td> <input type=  "/></td></tr><tr> <td> content </td> <td><textarea></textarea ></td></tr><tr> <td></td> <td><input type=  " button   " value="   Confirm   ></td></tr></table></script> 
 There is an operation here, so there should be a controller, we first add this controller to the app.js. 
 
 app.addcontroller=ember.controller.extend ({actions:{ new  :function () {console.log (  " new    )  var  title = $ ( '  
Its naming rules are capitalized on the first letter of the word, and then Ember will register it in the Add module so that you can use the controller in the Add template. Get rid of the button.
<input type="button" value=" confirm ""new "}} >
Since we are not using local storage such as localstorage, we can use variables to save temporarily, but the actual application seems to be more interactive with the server. It is an array var data=[]; of meanings and then action/new joins
Data.push ({title:title,content:content}); this. Transitiontoroute ('index');
transitionToRouteis to go to another route. We go to the home page, and then we see a blank home, still do not know what is the situation, because has not written code to let the record just added to show, good, we in the homepage of the template to each out.
<script type="text/x-handlebars " id="index">    <ol>        {#each model}        }<li>{{title}}</li>        {{/each}}     </ol></script>
Here each is model , if the direct each . result is not updated. Then we add a indexroute to return a data set.
App.indexroute = Ember.Route.extend ({    model:function () {        return  data    }}) ;
The Indexroute will be called by default when it is routed to index home page.
We are adding a view button to view the details, in order to find the current record, we add an index property to each record to record the current index:
Data.push ({    title:title,    content:content,    index:data.length});
" Info " This}} View {{/link-to}}</li>
I don't know why we can't get the @index index directly here, so we can only add a unique value to each record. Then add resouce to the route.
this. Resource ('index', {    '/'}, function () {    this. Resource ('info', {           'info/:index')    })
Here we put the route of info below index, so that we can reach index and info at the same time. Here you will add a line to the index template {{outlet}} .
{{Model.title}} {{Model.content}}
The same situation arises, I have to add model to do, do not understand why {{title}} you can take out the content must be {{model.content}} done. Returns the current array value in Inforoute
App.inforoute = Ember.Route.extend ({    model:function (param) {        console.log (data[param.index].content)         return Data[param.index]    });
By adding the Edit button to the details template, we determine whether to show "edit" or "save" based on a value.
 <div style= float:left;   >{{model.content}}  </p>{{  #if  Isediting}} <button {{action  '   }}> Save </button>{{  else   <button {{action  " edit  " }}> edit </button >{{/if   </div> 
 The isediting here is a new property in  Controller  's  action , and new Save and edit methods in  actions  
 
App.infocontroller = Ember.ObjectController.extend ({    actions: {        false,        edit: function () {            this.  Set('isediting',true);        },        save:function () {             this. Set ('isediting',false);}}    );
The values here are to be changed using the Set method, otherwise the page's refresh template will not be caused. Then we add a sub-template to display the edited content.
<script type="Text/x-handlebars"Id="Post/edit"> <table> <tr> <td> title </td> <td>{{input type="text"value=title}}</td> </tr> <tr> <td> content </td> <td>{{textarea value=model.c ontent}}</td> </tr> <tr> <td></td> <td><input type="Button"Value="Confirm"{{action"Save"}}></td> </tr> </table> </script>
Here is the {{input}} way of the control, so you can achieve the legendary two-way binding, it is based on Ember.TextField the class, so you can also customize an input control. The input API is shown in the official example below:
Todos.edittodoview = Ember.TextField.extend ({    didinsertelement:function () {        this. $ ( ). focus ();}    ); Ember.Handlebars.helper ('edit-todo', Todos.edittodoview);
And then it somehow finished the save operation, okay, I thought I'd save it, the official example is the model used, so it will be useful for first this.get(‘model).save() .
The last thing we need to do is delete the link button with the Action del:
{{#each model}} " Info " This}} View {{/link-to}} <a href="javascript:void (0)"del" index }}> Delete </a></li>{/each}}
Then add the action of Del in the Indexcontroller
App.indexcontroller = Ember.ArrayController.extend ({    actions: {        del:function (index) {            var  this. Get ('model');            Console.log (d)            var obj = D.findby ('index', index)            d.removeobject (obj)}}    );
The problem here is that we have to manipulate the model in order to react to the page in real time, look at the model method, use to findBy find the element, and thenremoveObject
In the end, we finished a whole operation of adding and deleting. Because I am also in the process of learning, if there is something wrong, please point to correct it! Also welcome to join my Q group 77813547
Emberjs Learning One (environment and first example)