Backbonejs Learning notes for the front-end JavaScript framework

Source: Internet
Author: User

<! DOCTYPE html>
<meta charset= "Utf-8" >
<script src= "Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" ></script>
<script src= "Http://documentcloud.github.com/underscore/underscore-min.js" ></script>
<script src= "Http://documentcloud.github.com/backbone/backbone-min.js" ></script>
<title>the5fire.com-backbone.js-hello world</title>
<body>

/* Case 1 */
<button id= "Check" > Registration </button>
<ul id= "World-list" >
</ul>

<script>
(function ($) {
World = Backbone.Model.extend ({
Create a World object with the Name property
Name:null
});

Worlds = Backbone.Collection.extend ({
Collection of World objects
Initialize:function (models, options) {
This.bind ("Add", Options.view.addOneWorld);
}
});

Appview = Backbone.View.extend ({
el: $ ("body"),
Initialize:function () {
//constructor, instantiate a world collection class, And the object that passed in the dictionary as a appview
This.worlds = new Worlds (null, {view:this})
},
Events: {
"click #check": "CheckIn" ,///event binding, the element with ID check in the binding Dom
},
Checkin:function () {
var world_name = prompt ("Excuse me, which star are you?");
if (World_name = = "") World_name = ' unknown ';
var world = New World ({name:world_name});
This.worlds.add (World);
},
Addoneworld:function (model) {
$ ("#world-list"). Append ("<li> here is from <b>" + model.get (' name ') + "</b> Greetings from Planet: Hello world! </li> ");
}
});
//instantiation Appview
var appview = new Appview;
}) (JQuery);
</script>

<!--case 2-model
<div id= "Test2" >man</div>
<script>
(function ($) {
Man = Backbone.Model.extend ({
URL: '/save/',
Initialize:function () {
Alert ("Hey, you create me!");
Binding Listener Events when initializing
This.bind ("Change:name", function () {
var name = this.get (' name ');
Alert ("You changed the name attribute to": + name);
});
Error hints
This.bind ("Error", function (Model,error) {
alert (error);
})
},
defaults:{
Name: ' Zhang San ',
Age: ' 38 '
},
Validation rules
Validate:function (attributes) {
if (Attributes.name = = "") {
Return "name cannot be empty";
}
}

Aboutme:function () {
Return ' I call ' + this.get (' name ') + ', this year ' + this.get (' age ') + ' year old ';
}

});
var man = new Mans;
Alert (man.get (' name '));
Alert (Man.aboutme ());
Man.set ({mane: ' Sam '}); The change event that triggers the binding,
Man.set ({mane: '});
Man.save ();
var man1 = new Man;
Man1.fetch ({url: '/getmans/'});
}) (jquery);
</script>
-
<!--case 3-collection
<script>
(function ($) {
Book = Back.Model.extend ({
default:{
Title: ' Default '
},
Initialize:function () {
Alert ("Hey,you create me!");
}
});

Bookshelf = Back.Collection.extend ({
Model:book
});
var Book1 = new book ({title: ' Book1 '});
var book2 = new book ({title: ' Book2 '});
var book2 = new book ({title: ' Book3 '});

var bookshelf = new Bookshelf ([BOOK1,BOOK2,BOOK3]); The array is used here, or you can use the add
var bookshelf = new Bookshelf;
Bookshelf.add (BOOK1);
Bookshelf.add (BOOK2);
Bookshelf.add (BOOK3);
Bookshelf.remove (BOOK3);

/*for (var i=0; i<bookshelf.models.length; i++) {
Alert (Bookshelf.models[i].get (' title '));
}*/

Based on underscore this JS library, you can also use each method to hunt the data in the collection,
Bookshelf.each (function (book) {
Alert (Book.get (' title '));
});


Bookshelf.fetch ({'/getbooks/', success:function (collection,response) {
Collection.each (function (book) {
Alert (Book.get (' title '));
});
},error:function () {
Alert ("Error");
}
});

}) (JQuery);
</script>
-

<!--
<script>
//backbone model
man = Backbone.Model.extend ({
Initialize:function () {
Alert ("Hey,you create Me");
This.bind (' Change:name ', function () {
var name = this.get (' name ');
alert (' You changed the Name property to: ' + Name ');
});
This.bind ("Error", function (model,error) {
Alert (error);
});
},
defaults:{
Name: "Zhang San",
Age: ' "
},
Validate:function (attributes) {
if (attributes.name = = {
Return ' name cannot be empty ';
}
},
Aboutme:function () {
return ' I call ' + this.get (' name ') + ', this year ' + this.get (' age ');
}
})
var man = new Man ();
Man.initialize ();
Alert (Man.aboutme ());
Alert (man.get (' name '));
Man.set ({name: ' Stick ', Age: ' 20 '});
Alert (man.get (' name ') +man.get (' age '));
Man.set ({name: '});
Man.save ();
Alert (man.validationerror);
</script>
-->

<!--
<script>
//backbone collection
Book = Backbone.Model.extend ({
default:{
Title: ' Zhang San '
},
Initialize:function () {
alert (' hey111! ');
}
});
Bookshelf = Backbone.Collection.extend ({
Model:book
}),
var book1 = new book ({title: ' Book1 '});
var bo Ok2 = new book ({title: ' Book2 '});
var book3 = new book ({title: ' Book3 '});
//alert (Book3.get (' title '));
var bookshelf = new Bookshelf ();
Bookshelf.add (BOOK1);
Bookshelf.add (BOOK2);
Bookshelf.add (BOOK3);
Alert (bookshelf.models[2].get (' title '));//output single element
Bookshelf.remove (BOOK3);
Bookshelf.each (function ( Book) {
Alert (book.get (' title ')),//traversal of all elements
}),
for (var i=0; i<bookshelf.models.length; i++) {
Alert ( Bookshelf.models[i].get (' title '));
}
</script>
-->

<!--
<script>
//backbone router
var approuter = Backbone.Router.extend ({
routes:{
"* Actions ":" Defaultroute "
},
Defaultroute:function (actions) {
Alert (actions);
}
});
var app_router = new Approuter ();
Backbone.history.start ();
</script>
<a href= "#actions1" >TESTACTIONS</A>
-->

<div title= "list" style= "color:red" id= "List" class= "ListView" ></div>
<!--
<script type= " Text/javascript ">
var ListView = Backbone.View.extend ({
TagName: ' div ',
className: ' ListView ',
ID : ' list ',
Attributes: {
Title: ' List ',
Style: ' color:red '
},
Render:function () {
This.el . InnerHTML = ' Hello world! ';
Document.body.appendChild (This.el);
}
});
var listview = new ListView ();
Listview.render ();
</script>
-->
<!--
<script>
var searchview = Backbone.View.extend ({
el: ' # List ',
Initialize:function () {
//this.render ();
},
Render:function () {
This.el.innerHTML = ' Hello Wo Rld! ';
//document.body.appendchild (This.el);
}
});
var searchview = new Searchview ();
Searchview.render ();
</script>
-->

<div id= "Search_container" ></div>

<script type= "Text/template" id= "Search_template" >
<label><%= Search_label%></label>
<input type= "text" id= "Search_input"/>
<input type= "button" id= "Search_button" value= "Search"/>
</script>
<script>
JQuery (document). Ready (function () {
Searchview = Backbone.View.extend ({
El: "#search_container",
Initialize:function () {
This.render ();
},
Render:function () {
Use the underscore library to compile the template
var template = _.template ($ ("#search_template"). HTML (), {});
Loading the template into the corresponding El attribute
this.el.html (template);
}
});
var searchview = new Searchview ({el: $ ("#search_container")});
Searchview.render ();
})
</script>
</body>

Backbonejs Learning notes for the front-end JavaScript framework

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.