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'))
})

转载于:https://www.cnblogs.com/Baiang/p/5290835.html