Backbone+marionettejs+requirejs example in TODOMVC the two data processing of source code analysis

When we use jquery most of the time is focused on the processing of DOM nodes, binding events to DOM nodes, and so on; what about the front-end MVC framework backbone?

M-model,collection and so on, is focused on the processing of data, it closed the interaction with the background data, and then we can use the data to change the binding event, can be updated to the DOM (here is view)

V-view (Marionette expanded, with Itemview,collectionview,compositeview and Layoutview), focus on processing DOM nodes

C-controller:router (Marionette extended, with Controller) to interpret the URL of the route, listen to the URL changes then, take the corresponding model and update the corresponding view

In general, it makes it simple, configurable, and straightforward to write complex data with DOM node interaction code in the past.

Here are the two data processing modules

js/Models/todo.js

/*Global Define*/define ([' Backbone ',    ' Localstorage '//backbone Localstorage Plug-in block, used to provide restful APIs, except that the data is stored in HTML5 local storage form, when used in the background],function(Backbone) {' Use strict '; returnBackbone.Model.extend ({localstorage:NewBackbone.localstorage (' Todos-backbone '),//access to the local storage can be ignoreddefaults: {//Todo model default form of dataTitle: ", Completed:false, created:0}, Initialize:function() {//update to back-end database if new when model is initialized (this is added to local storage)            if( This. IsNew ()) {                 This. Set (' Created ', Date.now ()); }}, Toggle:function() {//TODO model provides an out-of-state (Completed:true/false) function, and you can see that this function is referenced in Todoitemview.js            return  This. Set (' Completed ',! This. Get (' Completed ')); }    });});

js/Collections/todolist.js

/*Global Define*/define ([' Backbone ',    ' Models/todo ',    ' Localstorage '], function(Backbone, Todo) {' Use strict '; returnBackbone.Collection.extend ({model:todo,//the individual model of the collection dataset is TodoLocalstorage:NewBackbone.localstorage (' Todos-backbone '), getcompleted:function() {//ToDoList Collection provides a function to get a dataset completed to True, you can see that this function is referenced in Completedcount.js            return  This. where ({completed:true}); }, Getactive:function() {//ToDoList Collection provides a function to get a dataset completed to False, you can see that this function is referenced in Activecount.js            return  This. where ({completed:false}); }, Comparator:' Created '//the sort of model is sorted by created, or collection.sort ([options]) can be called to force sorting    });});

Backbone+marionettejs+requirejs example in TODOMVC the two data processing of source code analysis