[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. ...
随机推荐
- android 定时， 延时 任务
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 倒计时类 用 倒计时定时器CountDownTimer 延迟类 CountDownT ...
- 最大子段和问题Java实现
最大子段和问题 一.问题描述 给定长度为n的整数序列,a[1...n], 求[1,n]某个子区间[i , j]使得a[i]+…+a[j]和最大. 例如(-2,11,-4,13,-5,2)的最大子段和为 ...
- codevs 1365 浴火银河星际跳跃
1365 浴火银河星际跳跃 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 小 K 又在玩浴火银河了...不过这次他的目的不是跑运输 ...
- LOJ P3959 宝藏 状压dp noip
https://www.luogu.org/problemnew/show/P3959 考场上我怎么想不出来这么写的,状压白学了. 直接按层次存因为如果某个点在前面存过了则肯定结果更优所以不用在意各点 ...
- ngx_lua配置及应用
一.说明 这里不对lua语言本身及其编译器运行环境等做介绍,以下所有介绍前提对lua相关有所了解. 二.ngx_lua介绍 原理 ngx_lua将Lua嵌入Nginx,可以让Nginx执行Lua脚本, ...
- JavaScript和JSP的区别？
名字: JS:JavaScript JSP:Java Server Pages 执行过程:JSP先翻译,翻译成Servlet执行 如: test.jsp 要变成 test_jsp.java 然后编译成 ...
- spring @Transactional注解无效
<!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.jd ...
- service redis does not support chkconfig 的解决办法
问题解决办法如下: 必须把下面两行注释放在/etc/init.d/redis文件靠前的注释中(加入以下注释): # chkconfig: # description: Redis is a persi ...
- redhat 6.6 安装 （LVM)
http://www.cnblogs.com/kerrycode/p/4341960.html
- java zxing实现二维码生成和解析zxing实现二维码生成和解析
原文:https://www.cnblogs.com/zhangzhen894095789/p/6623041.html zxing实现二维码生成和解析 二维码 zxing 二维码的生成与解析 ...