Seajs + backbone instance

Recently, many people are discussing the front-end framework on the Internet. Taking the time to look at the front-end framework, writing something is an explanation of the front-end.

I saw a lot of comments on the front-end framework backbone. It is said that many large companies are using it. So I went to the official website to find the todos example and checked it. It is indeed as I commented on, I am familiar with java development, but I am not very familiar with front-end frameworks. But after reading it, I find it very difficult to learn.

Today, I changed todos, the official example of backbone, so that it can be used with seajs without any technical knowledge. I just want to know how to combine backbone with seajs.

 

Config configuration of seajs:

// Change version (xxxxx. v \ d +) after modified to clear cache!
Var alias = {
// Modules.seajs.com
'Jquery ': 'js/libs/jquery/1.8.3/jquery ',
'$': 'Js/libs/jquery/1.8.3/jquery ',
'Underscore ': 'js/libs/underscore/1.3.2/underscore ',
'Backone': 'js/libs/backbone/1.0.0/backone ',
'Mustache': 'js/libs/mustache/0.7.2/mustache ',
'Json': 'js/libs/json/2/json2 ',
'Jqueryui': 'js/libs/jqueryUI/1.8.21/jquery-Ui ',
'Artdialog ': 'js/libs/artdialog/4.1.2/artdialog ',
'Iframetools': 'js/libs/artdialog/4.1.2/iframetools ',
'Localstorage': 'js/libs/backbone/1.0.0/backbone. localstore ',

// --- Css
'Todos.css ':'./css/todos.css'
};

For (var a in alias ){
Alias [a] = base + alias [a];
}

Seajs. config ({
Alias: alias,
Map :[
[/^ (.*\.(? : Css | js) (. *) $/I, '$1? '+ Www_version] // timestamp here, clean the cache
],
Preload :[
This. JSON? '': 'Json'
]
});

 

 

In the todos. js file, you need to change the definition method, using the method provided by seajs:

 

Define (function (require, exports ){

// Reference the corresponding dependent lib
Require('todos.css '); // cited Style
Require ('jquery ');
Require ('$ ');
Require ('underscore ');
Require ('backone ');
Require ('json ');
Require ('localstore ');

// Todo Model
//----------

// Our basic ** Todo ** model has 'title', 'order', and 'done' bubutes.
Var Todo = Backbone. Model. extend ({

.....

 

Html page of todos:

Remove all referenced lib and styles on the page, because all references have been made in todos. js according to the seajs method. Add the following code to the todos html page:

</Script>
<Script src = "js/libs/seajs/2.0.0/sea. js"
Data-config = "./js/config. js"
Data-main = "./js/model/todos. js">

</Script>

Run: