前端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 分之间 ...
随机推荐
- linux下的文件权限
在学习linux中,发现linux系统对文件的权限管理要比windows非常严格. linux下建立新的组:groupadd 组名 linux新建立用户:useradd username 创建用户并分 ...
- vb.net 字符串的操作 应用
Module Module1 Sub Main() ' 定义3个字符串变量 Dim str1, str2, str3 As String '给str1,str2付初值 str1 = "Hel ...
- iOS中 视频直播功能－流媒体的使用
简单介绍: HLS 协议 : >5M会被AppStore拒绝 服务器要求低 延迟高 多平台 RTMP 协议: 电视直播 PC端使用 配合flash插件 及时性好 ...
- emacs打开乱码解决办法
前言:有时候我们使用emacs打开文件的时候,因为emacs默认编码跟文档编码不同而出现了乱码如图: 对于新手的我们应该通过以下两种途径来解决: 方法一: 只需C-x <RET> r ( ...
- CentOS的MySQL报错：Can't connect to MySQL server
原文链接: http://www.centoscn.com/CentosBug/softbug/2015/0622/5709.html 问题描述: 使用客户端远程登录连接基于CentOS 6.5服务器 ...
- HDU 3909 DLX
http://blog.csdn.net/sr_19930829/article/details/39756513 http://www.kuangbin.net/archives/hdu4069-d ...
- Hibernate执行sql语句
Hibernate执行sql语句:BasicServiceImpl basicServiceImpl = new BasicServiceImpl();String hql = "selec ...
- Python 2.7 学习笔记 元组的使用
一.元组 python中的元组和列表非常类似,核心区别是元组的内容初始化后是不可以修改的,而队列可以. 关于列表的详细介绍,可查看上一篇列表使用文章. 大部分场景下,能用元组的地方,都可以用列表.但有 ...
- 转：CSS圆角详解
CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...
- 设置不输入密码ssh登录
在/etc/hosts文件下加入: 192.168.1.60 u60 #设置u60为主机名 在每个节点上创建RSA秘钥: # ssh-keygen -t rsa # 一直按确定键即可 # touch ...