Backbone入门教程

Backbone笔记

入职新的公司，公司前端使用Backbone进行开发。这里记录下Backbone使用教程及技巧。Backbone框架是个成熟又小巧的前端MVC库。

Backbone.View(视图)

• reander：默认实现是没有操作的

//html代码
    <div id="search_container"></div>
    	<script type="text/template" id="search_template">
        	<div>
            <%= search_label %>
        </div>
    </script>
//js代码
	 var SearchView = Backbone.View.extend({
                initialize: function () {},
                render: function (context) {
                    console.log($(this.el))
                        //使用underscore这个库，来编译模板
                    var template = _.template($("#search_template").html());
                    //加载模板到对应的el属性中
                    $(this.el).html(template(context));
                }
            });
            var searchView = new SearchView({
                el: $("#search_container")
            });

            //这个reander的方法可以放到view的构造函数中
            //这样初始化时就会自动渲染
            searchView.render({
                search_label: "搜索渲染111"
            });

Backbone.Collection（集合）

• add：向集合中添加一个模型
• where：返回集合中所有匹配所传递 attributes（属性）的模型数组
• fetch()：用于从服务器接口获取集合的初始化数据，覆盖或追加到集合列表中
• create()：在集合中创建一个新的模型，并将其同步到服务器

var appModel = Backbone.Model.extend({
    initialize: function(){ 
        //alert(this.get("test"));
    },
    defaults:{ //缺省值
        test: '1111'
    }
})

//new appModel;

var appCollection = Backbone.Collection.extend({
    modle: appModel //指定模型
})

var appModel1 = new appModel({test: '2222'})
var appModel2 = new appModel({test: '333333'})
var appModel3 = new appModel({test: '44444'})

//添加到集合中
var book = new appCollection([appModel1,appModel2,appModel3]) 

//each取数据
book.each(function(book){
    console.log(book.get('test'))
})