Home > Developer > JavaScript
<! 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
