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)ビューのカスタマイズ

方法1

var TodoItemView = Backbone.View.extend({
    // ： ， ，ID
    tagName: "li",
    className: "item-task",
    id:'item1',
    // attributes 
    attributes:{
        style:"color: red;"
    }
});

方法二

<p id="header">headerp>

クラスまたはインスタンスでバインド

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

var todoItemView= new TodoItemView({
    el: "#header"
});         

(4)レンダーの再ロード

方法1

var TodoItemView = Backbone.View.extend({
    tagName: 'p',
    id:'header',
    render: function(){
        this.$el.html('header content');
        return this;
    }
});
var todoItemView= new TodoItemView();
todoItemView.render().$el.appendTo($('body'));

方法二

<p id="header">headerp>

var TodoItemView = Backbone.View.extend({
    render: function(){
        this.$el.html('header content');
        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(''+this.model.get('title')+'');
        return this;
    }
});
var todoItemView= new TodoItemView({
    model: todoItem
});
todoItemView.render().$el.appendTo($('body'));

注意:Modelのデータが変更された場合、Backboneは自動renderしません.