[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. ...
随机推荐
- Failed to resolve: com.android.support:design:25.4.0
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 错误:(27, 13) Failed to resolve: com.android.s ...
- 【递推】Codeforces Round #483 (Div. 2) [Thanks, Botan Investments and Victor Shaburov!] D. XOR-pyramid
题意:定义,对于a数组的一个子区间[l,r],f[l,r]定义为对该子区间执行f操作的值.显然,有f[l,r]=f[l,r-1] xor f[l+1,r].又定义ans[l,r]为满足l<=i& ...
- Linux提权exp大全
如下表 #CVE #Description #Kernels CVE-2017-1000367 [Sudo] (Sudo 1.8.6p7 - 1.8.20) CVE-2017-7494 [Samba ...
- 洛谷OJ P2356 弹珠游戏 维护前缀和
题目描述 Description MedalPluS 和他的小伙伴 NOIRP 发掘了一个骨灰级别的游戏--超级弹珠. 游戏的内容是:在一个 n*n 的矩阵里,有若干个敌人,你的弹珠可以摧毁敌人,但只 ...
- flash 跨域加载 二次加载
var url2:String = "http://thirdapp0.qlogo.cn/qzopenapp/fa5d80ebf9fc89aaa1d7ddb0e1b861e58d77b409 ...
- HDU 4649 Professor Tian（反状态压缩dp，概率）
本文出自 http://blog.csdn.net/shuangde800 题目链接:点击打开链接 题目大意 初始有一个数字A0, 然后给出A1,A2..An共n个数字,这n个数字每个数字分别有一 ...
- BZOJ2831(小强的金字塔系列问题--区域整点数求法)
题目:2831: 小强的金字塔 题意就是给出A,B,C,R,L,然后求 这里其实用到扩展欧几里德.(基本上参照clj的解题报告才理解的) 分析:我们先来分析一般情况: 这里我们假设A<C和B&l ...
- USB Mass Storage大容量存储 The Thirteen Class章节的理解
http://blog.csdn.net/xgbing/article/details/7002558 USB Mass Storage 6.7 The Thirteen Class章节的理解 Cas ...
- LeetCode152：Maximum Product Subarray
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- JS经常使用字符串处理方法总结
1.indexOf()方法.从前往后查找字符串位置.大写和小写敏感,从0開始计数.同理,lastIndexOf() 方法从后往前.两个方法对于同样的检索条件输出的结果是一样的 比如: <scri ...