[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. ...
随机推荐
- PHP 笔记——文件引用
1. 文件路径 "文件路径"指的是被包含文件所在的绝对路径或相对路径. 在相对路径中,"./"表示当前目录,"../"表示当前目录的上级目录 ...
- 【搜索】【组合数学】zoj3841 Card
转载自:http://blog.csdn.net/u013611908/article/details/44545955 题目大意:一副牌除掉大小王,然后有一些已经形成了序列,让你算剩下的牌能组合出多 ...
- PHP 5.5以上 使用 CURL 上传文件
PHP 5.5以上 使用 CURL 上传文件的代码: curl_setopt(ch, CURLOPT_POSTFIELDS, [ 'file' => new CURLFile(realpath( ...
- web文件上传组件比较jQuery File Upload和Fine Uploader
jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/ Fine Uploader: http://fineuploader ...
- ACM需要掌握算法
数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 一维线段树 二维 ...
- BZOJ 4197 NOI 2015 寿司晚宴 状压DP
4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 694 Solved: 440[Submit][Status] ...
- UVALive 5066 Fire Drill BFS+背包
H - Fire Drill Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Sta ...
- curl多文件上传
发送: header('Content-type:text/html; charset=utf-8'); //声明编码//模拟批量POST上传文件$url = 'http://test.cm/rece ...
- SpringMVC怎么获取前台传来的数组
var tollerlist = new Array(); for(var k in objToller){ tollerlist.push(k); } $.ajax({ type:"pos ...
- thread_indent
http://blog.csdn.net/justlinux2010/article/details/10269033