Web Front-endJS TutorialUsage examples of Model and Collection in Backbone.js framework_Basic knowledgeUsage examples of Model and Collection in Backbone.js framework_Basic knowledge
Model
Regarding backbone, the most basic thing is the model. This thing is like the database mapping model in back-end development. It is also a model of data objects, and should have the same attributes as the back-end model. (Only properties that need to be manipulated through the front end).
Let's take you step by step through examples to understand what the backbone model is.
First define an html page:
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-model</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
/**
*此处填充代码
**/
})(jQuery);
</script>
</html>
The following code needs to be filled in the function in the script tag of this html.
1. The simplest object
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
}
});
var man = new Man;
This is very simple. There is also a model display in helloworld, and no attributes are defined. Here is a method during initialization, or called a constructor.
2. Two methods of object assignment
The first method is to define it directly and set the default value.
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张三',
age: '38'
}
});
var man = new Man;
alert(man.get('name'));
The second type is defined when assigning
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
}
});
man.set({name:'the5fire',age:'10'});
alert(man.get('name'));
Get is used when getting values.
3. Methods in objects
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张三',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
alert(man.aboutMe());
4. Monitor changes in attributes in objects
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为：" + name);
});
},
defaults: {
name:'张三',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
man.set({name:'the5fire'}) //触发绑定的change事件，alert。
5. Add validation rules and error prompts for objects
Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为：" + name);
});
this.bind("error",function(model,error){
alert(error);
});
},
defaults: {
name:'张三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空！";
}
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
man.set({name:''}); //根据验证规则，弹出错误提示。
6. Obtaining and saving objects requires server-side support to test.
First, you need to define a url attribute for the object. When the save method is called, all attributes of the object will be posted to the server.
Man = Backbone.Model.extend({
url:'/save/',
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为：" + name);
});
this.bind("error",function(model,error){
alert(error);
});
},
defaults: {
name:'张三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空！";
}
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;;
man.set({name:'the5fire'});
man.save(); //会发送POST到模型对应的url，数据格式为json{"name":"the5fire","age":38}
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况，如果直接使用fetch方法，那么他会发送get请求到你model的url中，
//你在服务器端可以通过判断是get还是post来进行对应的操作。
man1.fetch();
//第二种情况，在fetch中加入参数，如下：
man1.fetch({url:'/getmans/'});
//这样，就会发送get请求到/getmans/这个url中，
//服务器返回的结果样式应该是对应的json格式数据，同save时POST过去的格式。
//不过接受服务器端返回的数据方法是这样的：
man1.fetch({url:'/getmans/',success:function(model,response){
alert('success');
//model为获取到的数据
alert(model.get('name'));
},error:function(){
//当返回格式不正确或者是非json数据时，会执行此方法
alert('error');
}});
Note: The above codes are only codes that can be executed normally, but there will be examples on the server side later.
One more thing to add here is that all asynchronous operations on the server are completed through the Backbone.sync method. When this method is called, a parameter will be automatically passed and a corresponding request will be sent to the server based on the parameters. For example, if you save, Backbone will determine whether your object is new. If it is newly created, the parameter is create. If it is an existing object that has only been changed, then the parameter is update. If you call the fetch method, then The parameter is read. If it is destroy, then the parameter is delete. It is also called CRUD ("create", "read", "update", or "delete"), and the request types corresponding to these four parameters are POST, GET, PUT, and DELETE. You can perform corresponding CRUD operations on the server based on this request type.
Note:
Regarding url and urlRoot, if you set the url, then your CRUD will send the corresponding request to this url, but another problem is the delete request. The request is sent, but no data is sent, then you are The server does not know which object (record) should be deleted, so here is another concept of urlRoot. After you set urlRoot, when you send PUT and DELETE requests, the requested URL address is: /baseurl/[model.id ], so that you can update or delete the corresponding object (record) on the server side by extracting the value behind the url.
Collection
Collection is an ordered collection of model objects. The concept is very simple to understand. You will find it simpler after looking at a few examples.
1. Examples of book and bookshelf
Book = Backbone.Model.extend({
defaults : { // 感谢网友蓝色动力指正改为defaults
title:'default'
},
initialize: function(){
//alert('Hey, you create me!');
}
});
BookShelf = Backbone.Collection.extend({
model : Book
});
var book1 = new Book({title : 'book1'});
var book2 = new Book({title : 'book2'});
var book3 = new Book({title : 'book3'});
//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
//基于underscore这个js库，还可以使用each的方法获取collection中的数据
bookShelf.each(function(book){
alert(book.get('title'));
});
It’s very simple, no explanation
2. Use fetch to get data from the server
First define the url in the Bookshelf above. Note that there is no urlRoot attribute in the collection. Or you define the value of url directly in the fetch method, as follows:
bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
collection.each(function(book){
alert(book.get('title'));
});
},error:function(){
alert('error');
}});
It also defines two methods that accept return values. I think the specific meaning is easy to understand. If the data in the correct format is returned, the success method will be called. If the data in the wrong format is returned, the error method will be called. Of course, the error method also looks Add the same formal parameters as the success method.
The corresponding return format of BookShelf is as follows: [{'title':'book1'},{'title':'book2'}....]
3. reset method
This method needs to be coordinated with the fetch above. After the collection fetches the data, it will call the reset method, so you need to define the reset method in the collection or bind the reset method. Here is a demo using binding:
bookShelf.bind('reset',showAllBooks);
showAllBooks = function(){
bookShelf.each(function(book){
​//将book数据渲染到页面。
});
}
The binding step must be performed before fetch.
The complete code for collection is given below, which requires server-side support. The server-side construction will be written later.
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-collection</title>
</head>
<body>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
//collection是一个简单的models的有序集合
//1、一个简单的例子
Book = Backbone.Model.extend({
defaults : { // 感谢网友蓝色动力指正改为defaults
title:'default'
},
initialize: function(){
//alert('Hey, you create me!');
}
});
BookShelf = Backbone.Collection.extend({
model : Book
});
var book1 = new Book({title : 'book1'});
var book2 = new Book({title : 'book2'});
var book3 = new Book({title : 'book3'});
//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用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'));
}
*/
//基于underscore这个js库，还可以使用each的方法获取collection中的数据
bookShelf.each(function(book){
alert(book.get('title'));
});
//2、使用fetch从服务器端获取数据,使用reset渲染
bookShelf.bind('reset', showAllBooks);
bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
collection.each(function(book){
alert(book.get('title'));
});
},error:function(){
alert('error');
}});
showAllBooks = function(){
bookShelf.each(function(book){
​//将book数据渲染到页面。
});
}
//上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);
</script>
</html>
JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AMDifferent JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AMJavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AMI built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AMThis article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
JavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AMJavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
The Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AMThe latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
Demystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AMJavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
Is Python or JavaScript better?Apr 06, 2025 am 12:14 AMPython is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
Zend Studio 13.0.1
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Dreamweaver CS6
Visual web development tools
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
