Emberjs Learning II (Ember-data and Localstorage_adapter)

Emberjs Learning II (Ember-data and Localstorage_adapter)

Preparatory work

First we join ember-data and ember-localstorage-adapter two dependencies, using bower install the two plugins installed. As follows

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

Then we can start today's example, what we have to do today and "beginner Emberjs" is not much different, just the previous data source used in the array, and the data after the refresh is not, and today to do is to change the array into EMBERJS data model, Then save to Localstorage, so the browser supports localstorage if you preview the effect.

OK, or create a new. html page and a app.js file, and then introduce JS in the HTML

<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=".. /.. /bower_components/ember-data/ember-data.min.js"></script><script type="Text/javascript"Src=".. /.. /bower_components/ember-localstorage-adapter/localstorage_adapter.js"></script><script type="Text/javascript"Src="Js/app.js"></script>

Here are more references than before ember-data and localstorage_adapter .

We think of the scene is still an initial list, and then we have to delete and modify it, these changes are synchronized to the local, refresh also exists. Let's show the list first:

<script type="text/x-handlebars" id="index"><ol >{#each model}}"del"}}> Delete </button></li>{/ Each }} </ol>{{outlet}}</script>

We then return a store in the index's route.

App.indexroute = Ember.Route.extend ({    model:function () {        returnthis. Store.find ('test');}    );

It means to find a data object model in the store that has a namespace called Test, which has a content property that is the corresponding data set, so we can {{#each content}} or {{#each controller}} (not recommend it)in each of the above.

In the beginning there is no data, we add an input box and a button in the template above:

{{input value=title}} " Add "}} > Add </button>

Here the input is bound to a title property, the old writing is valueBinding="title" , but the new version does not seem to recommend this, the title corresponds to the controller in the attribute, button on the Add an action.

App.indexcontroller = Ember.ArrayController.extend ({    title:null,    actions:{        add : function () {    }});

OK, we also have to register an adapter for just now, store Emberjs has a default adapter, RESTAdapter it is used to submit the network request, is when you add or delete changes to the server will be submitted to the Ajax return JSON, but this time we do not need it, we have to use ember-localstorage-adapter .

/* * Ember Data * */  = DS. Model.extend ({     title:DS.attr ('string'),    desc:DS.attr ('  string'= DS. Lsadapter.extend ({    namespace'test'});

Here we build a model with two fields, and then add a namespace called Test adapter, OK, we then the actions of the add operation to write code, to add a record can use the store.createRecord method.

actions:{add:function () {Console.log ( This.Get('content')) Console.log ( This.Get('title'))        varnewrecord= This. Store.createrecord ('Test'); NewRecord.Set('title', This.Get('title'));    Newrecord.save (); }}

We create a record in test and set its value, and here's another way to do that is to use the second parameter of CreateRecord to pass in the new object

var this. Store.createrecord ('test', {    title:this.  Get('title')});

Open the page, we try the effect

Then we add the deleted action to the example in the previous section.

Del:function (record) {    this. Store.deleterecord (r);    R.save ();}

Modify the operation and "beginner Emberjs" in the similar, here do not repeat paste, I will be in the source code in the back to add this function.

        update:function () {            varthis.  Get('content');            Content.save ();        }

App.inforoute = Ember.Route.extend ({    model:function (arg) {        console.log (ARG)        return this. Store.find ('test', arg.id);    });

The source address of this article: Https://github.com/tianxiangbing/emberjs-test/tree/master/example/test2

Demo case Address of this article: http://www.lovewebgames.com/emberjs/example/test2/index.html

Emberjs Learning II (Ember-data and Localstorage_adapter)