[Backbone] First Application!!!!
Important things to remember:
1. Usually, we create Collection, CollectionViews, Model, View.
Collection <--> CollectionViews
Moel <--> View
2. Application can start from CollectionView or View by creating other instance.
3. Uisng a grobel App object to control everything.
4. CollectionView: the function is to render grobel interface and existing data to
the html. In initialize function, to create instance object of collection, and listen to events.
Events is model events! And don't forget calling render() fucnton.!
5. Collection just pass a model object.
6. Single modle is to fetch data and set defaults data.
7. Single view is to create tag, listenTo model events. Create user generate events{}.
(function(){
var App = {
Collections : {},
Models : {},
Views : {}
};
App.Models.ToDoItem = Backbone.Model.extend({
defaults:{firstName: "Zhentian", lastName: "Wan"}
});
App.Views.ToDoItem = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render', 'swap', 'remove', 'unrender');
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'remove', this.unrender);
},
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
render: function(){
this.$el.html('<span style="color:black;">'+this.model.get('firstName')+' '+this.model.get('lastName')+'</span> <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this;
},
swap: function(){
var swapped = {
firstName: this.model.get('lastName'),
lastName: this.model.get('firstName')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
},
unrender: function(){
this.$el.remove();
}
});
App.Collections.ToDoList = Backbone.Collection.extend({model: App.Models.ToDoItem});
App.Views.ListView = new (Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render', 'appendItem', 'addItem');
this.collection = new App.Collections.ToDoList();
this.listenTo(this.collection, 'add', this.appendItem);
this.render();
this.counter = 0;
},
events:{
'click button#add': 'addItem'
},
render: function(){
this.$el.html('<button id="add">Click to add</button><ul></ul>');
return this;
},
addItem: function(){
var item = new App.Models.ToDoItem();
item.set({lastName: 'Yoona'+' '+(++this.counter)});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new App.Views.ToDoItem({model: item});
$('ul', this.el).append(itemView.render().el);
}
}))();
})();
<!DOCTYPE html>
<html>
<head>
<title>Angular Directive</title>
<link rel="stylesheet" href="foundation.min.css" />
<script src="angular.min.js"></script>
<script src="main.js"></script>
</head>
<body >
<div ng-app="superApp">
<superhero flight speed strength>Superman</superhero>
<superhero speed>The Flash</superhero>
<superhero strength>The Hulk</superhero>
</div>
</body>
</html>
[Backbone] First Application!!!!的更多相关文章
- The Top 10 Javascript MVC Frameworks Reviewed
Over the last several months I have been in a constant search for the perfect javascript MVC framewo ...
- 前端MVC框架Backbone 1.1.0源码分析(一)
前言 如何定义库与框架 前端的辅助工具太多太多了,那么我们是如何定义库与框架? jQuery是目前用的最广的库了,但是整体来讲jQuery目的性很也明确针对“DOM操作”,当然自己写一个原生态方法也能 ...
- 前端MVC框架Backbone 1.1.0源码分析(二) - 模型
模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...
- 我对Backbone.js的一些认识
backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术 ...
- Backbone源码阅读手记
Backbone.js是前端的MVC框架,它通过提供模型Models.集合Collection.视图Veiew赋予了Web应用程序分层结构.从源码中可以知道,Backbone主要分了以下几个模块: ( ...
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之一
Marionette牵线木偶,Backbone是脊骨的意思,Marionette是基于Backbone做扩展库,可以理解为把脊骨骨架绑线扯着变成牵线木偶动起来哈哈,使backbone更易使用呵呵! 构 ...
- MVVM与Backbone demo
MVVM https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
- 用Backbone.js创建一个联系人管理系统(五)
原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...
- 【转】Backbone标准例子——通讯录
参考:http://z2009zxiaolong.iteye.com/blog/1847833 感觉不错的例子,模型.视图.路由等知识点都用到了:),将此文中的源码转载如下: http://dmyz. ...
随机推荐
- HDU 3949 XOR 线性基
http://acm.hdu.edu.cn/showproblem.php?pid=3949 求异或第k小,结论是第k小就是 k二进制的第i位为1就把i位的线性基异或上去. 但是这道题和上一道线性基不 ...
- 优客365 v2.9版本 后台存在SQL注入
安装 打开后台登陆界面 http://localhost:9096/yk365/system/login.php 输入单引号报错 得到表名 经过跟踪后在\module\login.php文件出现错误 ...
- 【10.6校内测试】【小模拟】【hash+线段树维护覆盖序列】
一开始看到题就果断跳到T2了!!没想到T2才是个大坑,浪费了两个小时QAQ!! 就是一道小模拟,它怎么说就怎么走就好了! 为什么要用这么多感叹号!!因为统计答案要边走边统计!!如果每个数据都扫一遍20 ...
- BZOJ3473 字符串 广义后缀自动机
今天主攻了下SAM 好多东西以前都没理解到 对于这道题 我们建一个自动机存所有串 每个穿last从1开始 对于自动机上每个点额外记一个cnt 表示能匹配到这个点的不同串个数 建完对每个串在自动机上匹配 ...
- 记一次帮朋友解决apache站点403错误的过程
apache版本: [root@iZ25eby2utyZ web]# rpm -qa | grep httpd httpd-tools--.el6.centos..x86_64 httpd--.el6 ...
- 学习JavaEE，对比ASP.NET顿悟出一点点道理
图一 图二 配套说明: 步骤一.客户端向web服务器(tomcat)发送http请求 步骤二.tomcat接收到请求后,将请求信息交给servlet容器,由servlet容器对请求进行封装(HttpS ...
- PHP self与static区别
this,static和self. self和this还是很好区分的,可是self和static就很糊涂了,两者都能调用静态的方法和属性,看似使用上没有什么太大的分别,但是实际上分别很大,先来看下面这 ...
- HDU 3436 Queue-jumpers （splay tree）
Queue-jumpers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 分频器VHDL描述
在数字电路中,常需要对较高频率的时钟进行分频操作,得到较低频率的时钟信号.我们知道,在硬件电路设计中时钟信号时非常重要的. 下面我们介绍分频器的VHDL描述,在源代码中完成对时钟信号CLK的2分 ...
- RAD Studio 2010~XE8 官方 ISO 下载地址 (2015-03-28更新)
http://bbs.csdn.net/topics/390816856 RAD Studio XE8 目前最新版 v22.0.19027.8951 官方 ISO 文件下载(6.72GB):http: ...