前端javascript框架之BackboneJS学习笔记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<title>the5fire.com-backbone.js-Hello World</title>
</head>
<body>
/* 案例1 */
<button id="check">报到</button>
<ul id="world-list">
</ul>
<script>
(function ($) {
World = Backbone.Model.extend({
//创建一个World的对象，拥有name属性
name: null
});
Worlds = Backbone.Collection.extend({
//World对象的集合
initialize: function (models, options) {
this.bind("add", options.view.addOneWorld);
}
});
AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
//构造函数，实例化一个World集合类，并且以字典方式传入AppView的对象
this.worlds = new Worlds(null, { view : this })
},
events: {
"click #check": "checkIn", //事件绑定，绑定Dom中id为check的元素
},
checkIn: function () {
var world_name = prompt("请问，您是哪星人?");
if(world_name == "") world_name = '未知';
var world = new World({ name: world_name });
this.worlds.add(world);
},
addOneWorld: function(model) {
$("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候：hello world！</li>");
}
});
//实例化AppView
var appview = new AppView;
})(jQuery);
</script>
<!-- 案例2- model
<div id="test2">man</div>
<script>
(function($){
Man = Backbone.Model.extend({
url:'/save/',
initialize:function(){
alert("Hey, you create me!");
//初始化时绑定监听事件
this.bind("change:name",function(){
var name = this.get('name');
alert("你改变了name属性为": + name);
});
//错误提示
this.bind("error",function(model,error){
alert(error);
})
},
defaults:{
name:'张三',
age:'38'
},
//验证规则
validate:function(attributes){
if(attributes.name == ""){
return "name不能为空"；
}
}
aboutMe:function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
alert(man.get('name'));
alert(man.aboutMe());
man.set({mane:'山姆'}); //触发绑定的change事件，
man.set({mane:''});
man.save();
var man1 = new Man;
man1.fetch({url:'/getmans/'});
})(jquery);
</script>
-->
<!-- 案例3- collection
<script>
(function($){
Book = Back.Model.extend({
default:{
title:'default'
},
initialize:function(){
alert("Hey,you create me!");
}
});
BookShelf = Back.Collection.extend({
model:Book
});
var book1 = new Book({title:'book1'});
var book2 = new Book({title:'book2'});
var book2 = new Book({title:'book3'});
var bookShelf = new BookShelf([book1,book2,book3]); //这里用的是数组，也可以用add
var bookShelf = new BookShelf;
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
bookShelf.remove(book3);
/*for(var i=0; i<bookShelf.models.length; i++){
alert(bookShelf.models[i].get('title'));
}*/
//基于underscore这个JS库，还可以使用each的方法猎取collection中的数据,
bookShelf.each(function(book){
alert(book.get('title'));
});
bookShelf.fetch({'/getbooks/',success:function(collection,response){
collection.each(function(book){
alert(book.get('title'));
});
},error:function(){
alert("error");
}
});
})(jQuery);
</script>
-->
<!--
<script>
//backbone model
Man = Backbone.Model.extend({
initialize:function(){
alert("Hey,you create me");
this.bind('change:name',function(){
var name = this.get('name');
alert('你改变了name属性为：' + name);
});
this.bind("error",function (model,error){
alert(error);
});
},
defaults:{
name:"张三",
age:'20'
},
validate:function(attributes){
if(attributes.name == ''){
return 'name不能为空';
}
},
aboutMe:function(){
return '我叫' + this.get('name') + ',今年' + this.get('age');
}
})
var man = new Man();
man.initialize();
alert(man.aboutMe());
alert(man.get('name'));
man.set({name:'大棒',age:'20'});
alert(man.get('name')+man.get('age'));
man.set({name:''});
man.save();
alert(man.validationError);
</script>
-->
<!--
<script>
//backbone collection
Book = Backbone.Model.extend({
default:{
title:'张三'
},
initialize:function(){
alert('Hey111!');
}
});
BookShelf = Backbone.Collection.extend({
model:Book
});
var book1 = new Book({title:'book1'});
var book2 = new Book({title:'book2'});
var book3 = new Book({title:'book3'});
//alert(book3.get('title'));
var bookShelf = new BookShelf();
bookShelf.add(book1);
bookShelf.add(book2);
bookShelf.add(book3);
alert(bookShelf.models[2].get('title')); //输出单一元素
bookShelf.remove(book3);
bookShelf.each(function(book){
alert(book.get('title')); //遍历出所有元素
});
for(var i=0; i<bookShelf.models.length; i++){
alert(bookShelf.models[i].get('title'));
}
</script>
-->
<!--
<script>
//backbone router
var AppRouter = Backbone.Router.extend({
routes:{
"*actions":"defaultRoute"
},
defaultRoute:function(actions){
alert(actions);
}
});
var app_router = new AppRouter();
Backbone.history.start();
</script>
<a href="#actions1">testActions</a>
-->
<div title="列表" style="color:red" id="list" class="listview"></div>
<!--
<script type="text/javascript">
var ListView = Backbone.View.extend({
tagName : 'div',
className : 'listview',
id : 'list',
attributes : {
title : '列表',
style : 'color:red'
},
render : function() {
this.el.innerHTML = 'Hello World!';
document.body.appendChild(this.el);
}
});
var listview = new ListView();
listview.render();
</script>
-->
<!--
<script>
var SearchView = Backbone.View.extend({
el : '#list',
initialize: function(){
//this.render();
},
render: function() {
this.el.innerHTML = 'Hello World!';
//document.body.appendChild(this.el);
}
});
var searchView = new SearchView();
searchView.render();
</script>
-->
<div id="search_container"></div>
<script type="text/template" id="search_template">
<label><%= search_label %></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
<script>
jQuery(document).ready(function(){
SearchView = Backbone.View.extend({
el:"#search_container",
initialize: function(){
//this.render();
},
render: function() {
//使用underscore这个库，来编译模板
var template = _.template($("#search_template").html(),{});
//加载模板到对应的el属性中
this.el.html(template);
}
});
var searchView = new SearchView({el: $("#search_container")});
searchView.render();
})
</script>
</body>
</html>
前端javascript框架之BackboneJS学习笔记的更多相关文章
- 前端javascript框架之AngularJS学习笔记
<!doctype html><html lang="en" ng-app><head><meta charset="utf-8 ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- 机器学习框架ML.NET学习笔记【4】多元分类之手写数字识别
一.问题与解决方案 通过多元分类算法进行手写数字识别,手写数字的图片分辨率为8*8的灰度图片.已经预先进行过处理,读取了各像素点的灰度值,并进行了标记. 其中第0列是序号(不参与运算).1-64列是像 ...
- 机器学习框架ML.NET学习笔记【3】文本特征分析
一.要解决的问题 问题:常常一些单位或组织召开会议时需要录入会议记录,我们需要通过机器学习对用户输入的文本内容进行自动评判,合格或不合格.(同样的问题还类似垃圾短信检测.工作日志质量分析等.) 处理思 ...
- 机器学习框架ML.NET学习笔记【2】入门之二元分类
一.准备样本 接上一篇文章提到的问题:根据一个人的身高.体重来判断一个人的身材是否很好.但我手上没有样本数据,只能伪造一批数据了,伪造的数据比较标准,用来学习还是蛮合适的. 下面是我用来伪造数据的代码 ...
- 机器学习框架ML.NET学习笔记【1】基本概念与系列文章目录
一.序言 微软的机器学习框架于2018年5月出了0.1版本,2019年5月发布1.0版本.期间各版本之间差异(包括命名空间.方法等)还是比较大的,随着1.0版发布,应该是趋于稳定了.之前在园子里也看到 ...
- 机器学习框架ML.NET学习笔记【5】多元分类之手写数字识别（续）
一.概述 上一篇文章我们利用ML.NET的多元分类算法实现了一个手写数字识别的例子,这个例子存在一个问题,就是输入的数据是预处理过的,很不直观,这次我们要直接通过图片来进行学习和判断.思路很简单,就是 ...
- 机器学习框架ML.NET学习笔记【6】TensorFlow图片分类
一.概述 通过之前两篇文章的学习,我们应该已经了解了多元分类的工作原理,图片的分类其流程和之前完全一致,其中最核心的问题就是特征的提取,只要完成特征提取,分类算法就很好处理了,具体流程如下: 之前介绍 ...
- 机器学习框架ML.NET学习笔记【7】人物图片颜值判断
一.概述 这次要解决的问题是输入一张照片,输出人物的颜值数据. 学习样本来源于华南理工大学发布的SCUT-FBP5500数据集,数据集包括 5500 人,每人按颜值魅力打分,分值在 1 到 5 分之间 ...
随机推荐
- Android自动化测试基础知识——MONKEY测试工具（转的）
本周开始启动手机输入法simeiji的自动化测试,同时开始接触手机浏览器自动化测试.接下来会对android自动化测试工具和方法做一个专题研究. 第一篇介绍monkey测试工具. 1 自动化测试背景 ...
- ios常见加密解密方法
在其他平台中经常会计算MD5值,在iOS平台中也提供了该方法,首先需要导入头文件 #import <CommonCrypto/CommonDigest.h> 方法CC_MD5可以获取MD5 ...
- HDU 1004 MAP【STL__map_的应用】
强大的MAP,今天终于开始好好学习一次. map内部是用红黑树维持的有序结构. 定义:map<int,string>mapStudent; 查找的时间复杂度为对数级别. 1.构造方法学习两 ...
- json_response的用法
传统的方法是当我们处理一个表单时,我们Post数据给服务器,服务器对数据进行处理后将数据返回给用户,此时部分写法是用页面刷新的方式将页面重新刷新一次呈现给用户,这样的话用户相当于读入了两次页面,人一多 ...
- linux popen函数
描述 popen() 函数 用 创建管道 的 方式启动一个 进程, 并调用 shell. 因为 管道是被定义成单向的, 所以 type 参数 只能定义成 只读或者 只写, 不能是 两者同时, 结果流也 ...
- 2016年会成为Java EE微服务年吗？
原文 http://www.infoq.com/cn/news/2016/02/javaee-microservices 进入2016年时间还不是很长,让我们回顾下去年年底的一个预言.去年12月,来 ...
- bzoj 1020-1029
1020 SHOI2008 安全的航线flight 这题的代码写了很久,主要是因为几何题的东西都忘得差不多了.除去写代码的2个小时,今晚又调了一晚上,终于AC了. 这题的做法还是很有参考价值的. 最简 ...
- Esper学习之五：EPL语法（一）
上篇说到了Esper的Context,要是不了解的同学请参看<Esper学习之四:Context>,看过的同学如果还是不理解的话可以给我评论,我将会尽可能的解答.之前有些同学问我Conte ...
- JPA相关知识点滴--持续更新中.....
Java 持久化(JPA) •Java EE 5 在EJB 3.0 中包含JPA 1.0 •参考实现:TopLink Essentials •Java EE 6 包含JPA 2.0 •参考实现:Ec ...
- (step6.1.5)hdu 1233(还是畅通工程——最小生成树)
题目大意:输入一个整数n,表示有n个村庄,在接下来的n*(n-1)/2中,每行有3个整数beigin.end.weight,分别表示路的起始村庄,结束村庄和村庄之间的距离. 求索要修的路的最短距离 解 ...