backbone入门小例子
最近听了个backbone的分享,为了避免听不懂,就先做了个小例子
例子很简单,效果如下
基本视图模板:
<script type="tex/template" id="template" >
<span><%=val%></span><span class="swap" style="margin:10px;cursor:pointer;">swap</span><span class="delete" style="margin:10px;cursor:pointer;">delete</span>
</script>
构建基本数据模型和集合:
var Man=Backbone.Model.extend({
defaults:{
name:'张三',
age:'1'
},
});
var ManList = Backbone.Collection.extend({
model:Man
})
基本的视图模型
var ItemView = Backbone.View.extend({
tagName:'li',
/*为视图注册事件*/
events:{
"click span.swap":"swap",
"click span.delete":"remove"
},
initialize:function(){
/*为视图和模型绑定事件*/
_.bindAll(this, 'swap','render','remove','unrender');
this.model.bind('change',this.render);
this.model.bind('remove',this.unrender);
},
render:function(){
var val = this.model.get('name')+""+this.model.get('age');
var html = _.template($("#template" ).html(), {val:val});
$(this.el).html(html);
return this;
},
unrender:function(){
$(this.el).remove();
},
swap:function(){
var swaped = {
name:this.model.get('age'),
age:this.model.get('name')
}
this.model.set(swaped);
},
remove:function(){
this.model.destroy();
}
})
主视图模型
var ListView = Backbone.View.extend({
el:$("body"),
events:{
"click button#add":"addItem"
},
initialize:function(){
/*为主视图和集合绑定事件*/
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new ManList();
this.collection.bind('add', this.appendItem);
/*初始化主视图*/
this.render();
/*声明主视图的属性*/
this.age = 1;
},
addItem:function(){
this.collection.add(new Man({age:this.age++}))
},
appendItem:function(item){
var itemView = new ItemView({
model: item
}); $(this.el).find('ul').append(itemView.render().el);
},
render:function(){
var self = this;
$(this.el).append('<button id="add">add item</button>');
$(this.el).append("<ul></ul>"); }
})
初始化视图
var listView = new ListView();
backbone入门小例子的更多相关文章
- Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子
Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
- Ajax入门小例子
大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html ---Ajax基础学习 http:/ ...
- spring+spring mvc+JdbcTemplate 入门小例子
大家使用这个入门时候 最好能够去 搜一下 spring mvc 的 原理,我放一张图到这里,自己琢磨下,后面去学习就容易了 给个链接 (网上一把,千万不能懒) https://www.cnblo ...
- SpringBoot介绍,快速入门小例子,目录结构,不同的启动方式,SpringBoot常用注解
SpringBoot介绍 引言 为了使用ssm框架去开发,准备ssm框架的模板配置 为了Spring整合第三方框架,单独的去编写xml文件 导致ssm项目后期xml文件特别多,维护xml文件的成本也是 ...
- Python In Action:一、入门小例子
Python In Action这本书真是有点猛,一开头就来这么个例子: import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame ...
- mybatis 不整合spring 入门小例子
先上一个搭建完的项目结构截图: 相对比较重要的配置文件有 db.properties , SqlMappingConfig.xml , mapper/User.xml , log4j.properti ...
- SpringBoot_MyBatisPlus快速入门小例子
快速入门 创建一个表 我这里随便创建了一个air空气表 idea连接Mysql数据库 点击右侧database再点击添加数据库 找到Mysql 添加用户名,密码,数据库最后点击测试 测试成功后在右侧就 ...
- css01入门小例子
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- spark sql 基本用法
一.通过结构化数据创建DataFrame: publicstaticvoid main(String[] args) { SparkConf conf = new SparkConf() .se ...
- 利用 操作符特性 代替if判断语句
参考:http://blog.csdn.net/speedme/article/details/22916181 1.&&的判断特性 #include <stdio.h> ...
- C++静态成员函数和静态成员变量的探索
静态数据成员属于类,非属于类对象,所以,定义位置就有了限制. 静态数据成员要实际地分配空间,故不能在类的声明中定义(只能声明数据成员).类声明只声明一个类的“尺寸和规格”,并不进行实际的内存分配,所以 ...
- javascript 学习随笔1
html部分 <body onload="message()"><!--主题部分加载就调用-->document.getElementById(" ...
- android:music
package com.terry; import java.io.File; import java.io.FileFilter; import java.io.IOException; impor ...
- QGraphicsView中选中QGraphicsPathItem使之不出现虚线框
绘制一条贝赛尔曲线,当选中该曲线时,显示其控制点并把控制点和起始点连结起来,从而可以清晰的显示曲线的参数. # -*- coding: utf-8 -*-from PyQt4 import QtGui ...
- JVM--Garbage First
Garbage First Garbage First 简称 G1,它的目标是要做到尽量减少 GC 所导致的应用暂停的时间,让应用达到准实时的效果,同时保持 JVM 堆空间的利用率,其最大的特色在于允 ...
- (Problem 4)Largest palindrome product
A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...
- QT 静态编译后中文可能会出现乱码
QT 静态编译后中文可能会出现乱码.这是因为处理文字编码的 libqcncodecs 库是以 plugin 形式存放在 QT 静态编译目录/plugs/codecs/libqcncodecs.a 文件 ...
- IOS开发中UIBarButtonItem上按钮切换或隐藏实现案例
IOS开发中UIBarButtonItem上按钮切换或隐藏案例实现案例是本文要介绍的内容,这个代码例子的背景是:导航条右侧有个 edit button,左侧是 back button 和 add bu ...