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