[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. ...
随机推荐
- 牛可乐发红包脱单OI赛 C 小可爱表白
打个暴力查一下OEIS,5min做完 出题人一开始把式子打错了,一开始的式子的结果为$n * (n + 3) * 2^{n - 3}$ 我们考虑化式子 首先考虑 $\sum\limits_{j = 1 ...
- 【贪心】【后缀自动机】Gym - 101466E - Text Editor
题意:给你两个串A,B,以及一个整数K,让你找到B的一个尽可能长的前缀,使得其在A串中出现的次数不小于K次. 对A串建立后缀自动机,然后把B串放在上面跑,由于每到一个结点,该结点endpos集合的大小 ...
- Codeforces Round #293 (Div. 2) D. Ilya and Escalator 概率DP
D. Ilya and Escalator time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- wikioi 1048 石子归并
dp[i][j]=min(dp[i][j],dp[i][k],dp[k+1][j]+sum[i][j]); 表示i-j的最小合并代价. #include <iostream> #inclu ...
- SEO从理论到实践
GITHUB:http://www.liu12fei08fei.top/blog/12seo.html 明白seo是什么 知道怎么做 SEO从理论到实践 什么是SEO? SEO和SEM的区别 SEO和 ...
- java 入门书籍（java7）
一.Java从入门到精通 <Java从入门到精通(第3版)>从刚開始学习的人角度出发,通过通俗易懂的语言.丰富多彩的实例.具体介绍了使用Java语言进行程序开发须要掌握的知识. <J ...
- jQuery碎语(2) 事件
4.事件 ● 通过方法名给元素绑定事件: $('li').click(function(event){}) ● 通过bind方法给元素绑定事件: $('li') .bind('click',funct ...
- 使用C#中的out关键字，用世界杯演绎
今年的世界杯好看至极,充满着故事性.戏剧性.无论你平常踢不踢球,也不管你是否懂球,你总能从中获得些许的情感释放.世界杯似乎超越了足球本身,成为世界各地人们的"情感总和",一场场比赛 ...
- DIOCP
DIOCP GITHUB: https://github.com/ymofen/diocp-v5.git diocp5====== ## 快速开始 从那里得到: git更新(推荐同步更新) 1.htt ...
- iOS开发中的 ARC
1. weak属性(弱引用) 被weak修饰的对象叫弱引用,不算对象持有者,一个方法执行完后会导致这个对象自动释放掉,并将对象的指针设置成nil,我使用GCD延时1000ms来验证,1000ms之后, ...