Backbone入门基础 - Model和View基本用法

声明：本文为笔记文章，学习自麦子学院-Backbone入门基础

1. Model

创建和实例化Model类 Backbone.Model.extend()方法 get(), set(), toJSON() var _obj={ title:"task 1", description: 'description 1' }; var TodoItem=Backbone.Model.extend({ }); var todoItem= new TodoItem(_obj); //--result-- console.log(todoItem.get('title')); console.log(todoItem.toJSON().description); todoItem.set('title','task 2'); console.log(todoItem.get('title'));

2.View

[1] 概念

与界面元素对应的JS对象对HMTL元素的操作，通过view对象完成

[2] View

（1）创建和实例化View类

var TodoItemView = Backbone.View.extend({ }); var todoItemView= new TodoItemView();

（2）el和$el

el表示页面上的元素（原生的DOM对象），而$el是这个元素的jQuery封装

（3）定制View

方法一 var TodoItemView = Backbone.View.extend({ //三个内置属性：标签名，类名，ID tagName: "li", className: "item-task", id:'item1', //其他自定义属性都需写到attributes中 attributes:{ style:"color: red;" } }); 方法二 <p id="header">header</p>

在类中或在实例中绑定

var TodoItemView = Backbone.View.extend({ el: "#header" }); var todoItemView= new TodoItemView({ el: "#header" });

（4）重载render

方法一 var TodoItemView = Backbone.View.extend({ tagName: 'p', id:'header', render: function(){ this.$el.html('<span>header content</span>'); return this; } }); var todoItemView= new TodoItemView(); todoItemView.render().$el.appendTo($('body')); 方法二 <p id="header">header</p> var TodoItemView = Backbone.View.extend({ render: function(){ this.$el.html('<span>header content</span>'); return this; } }); var todoItemView= new TodoItemView({ el: "#header" }); todoItemView.render();

（5）移除View

todoItemView.remove();

[3] View和Model的关系

（1）使用Model实例化View

Model提供数据，View渲染数据

var todoItemView= new TodoItemView({ model: todoItem });

（2）在View中访问Model

var TodoItem=Backbone.Model.extend({ }); var todoItem=new TodoItem({ title:"task 1", description: 'description 1' }); var TodoItemView = Backbone.View.extend({ tagname:'p', id:'header', render: function(){ this.$el.html('<span>'+this.model.get('title')+'</span>'); return this; } }); var todoItemView= new TodoItemView({ model: todoItem }); todoItemView.render().$el.appendTo($('body'));

注意：当Model中的数据发生改变时，Backbone不会自动render