<!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学习笔记的更多相关文章

  1. 前端javascript框架之AngularJS学习笔记

    <!doctype html><html lang="en" ng-app><head><meta charset="utf-8 ...

  2. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  3. 机器学习框架ML.NET学习笔记【4】多元分类之手写数字识别

    一.问题与解决方案 通过多元分类算法进行手写数字识别,手写数字的图片分辨率为8*8的灰度图片.已经预先进行过处理,读取了各像素点的灰度值,并进行了标记. 其中第0列是序号(不参与运算).1-64列是像 ...

  4. 机器学习框架ML.NET学习笔记【3】文本特征分析

    一.要解决的问题 问题:常常一些单位或组织召开会议时需要录入会议记录,我们需要通过机器学习对用户输入的文本内容进行自动评判,合格或不合格.(同样的问题还类似垃圾短信检测.工作日志质量分析等.) 处理思 ...

  5. 机器学习框架ML.NET学习笔记【2】入门之二元分类

    一.准备样本 接上一篇文章提到的问题:根据一个人的身高.体重来判断一个人的身材是否很好.但我手上没有样本数据,只能伪造一批数据了,伪造的数据比较标准,用来学习还是蛮合适的. 下面是我用来伪造数据的代码 ...

  6. 机器学习框架ML.NET学习笔记【1】基本概念与系列文章目录

    一.序言 微软的机器学习框架于2018年5月出了0.1版本,2019年5月发布1.0版本.期间各版本之间差异(包括命名空间.方法等)还是比较大的,随着1.0版发布,应该是趋于稳定了.之前在园子里也看到 ...

  7. 机器学习框架ML.NET学习笔记【5】多元分类之手写数字识别（续）

    一.概述 上一篇文章我们利用ML.NET的多元分类算法实现了一个手写数字识别的例子,这个例子存在一个问题,就是输入的数据是预处理过的,很不直观,这次我们要直接通过图片来进行学习和判断.思路很简单,就是 ...

  8. 机器学习框架ML.NET学习笔记【6】TensorFlow图片分类

    一.概述 通过之前两篇文章的学习,我们应该已经了解了多元分类的工作原理,图片的分类其流程和之前完全一致,其中最核心的问题就是特征的提取,只要完成特征提取,分类算法就很好处理了,具体流程如下: 之前介绍 ...

  9. 机器学习框架ML.NET学习笔记【7】人物图片颜值判断

    一.概述 这次要解决的问题是输入一张照片,输出人物的颜值数据. 学习样本来源于华南理工大学发布的SCUT-FBP5500数据集,数据集包括 5500 人,每人按颜值魅力打分,分值在 1 到 5 分之间 ...

随机推荐

  1. ajaxfileupload.js 文件上传

    一,前台代码. <input id="fileToUpload" type="file" size="25" name="f ...

  2. Linux怎么设置PostgreSQL远程访问

    原文链接: Linux怎么设置PostgreSQL远程访问 安装PostgreSQL数据库之后,默认是只接受本地访问连接.如果想在其他主机上访问PostgreSQL数据库服务器,就需要进行相应的配置. ...

  3. 详解python2 和 python3的区别

    看到这个题目大家可能猜到了我接下来要讲些什么,呵呵,对了,那就是列出这两个不同版本间的却别!搜索一下大家就会知道,python有两个主要的版本,python2 和 python3 ,但是python又 ...

  4. Linux下安装jekyll

    折腾了大半天,终于搞定了,这可得记下来了. 我的Linux版本:CentOS 6.5 主要的安装顺序还是官网上的说明:http://jekyllrb.com/docs/installation/,所以 ...

  5. pojg2744找一个最长的字符串x，使得对于已经给出的字符串中的任意一个y，x或者是y的子串，或者x中的字符反序之后得到的新字符串是y的子串。

    http://poj.grids.cn/practice/2744 描述现在有一些由英文字符组成的大小写敏感的字符串,你的任务是找到一个最长的字符串x,使得对于已经给出的字符串中的任意一个y,x或者是 ...

  6. java生产者消费者问题代码分析

    作者要的是一个生产者生成,接着必须有一个消费者消费,那这不是需要单线程吗?或者使用1个大小的阻塞队列.所以只谈论问题本身,不谈论好不好. 具体代码: import java.util.concurre ...

  7. 斯坦福大学IOS开发课程笔记(第七课第一部分)

    转载请注明出处 http://blog.csdn.net/pony_maggie/article/details/31462099 作者:小马 这节课的内容太多,分两部分介绍.本节课主要是介绍怎样开发 ...

  8. C Primer Plus 读书笔记之C基础回顾

    目标代码文件.可执行文件和库 C编程的基本策略是使用程序将源代码文件转换为可执行文件,此文件包含可以运行的机器语言代码.C分两步完成这一工作:编译和链接.编译器将源代码转换为中间代码,链接器将此中间代 ...

  9. ASP.NET Excel导入到SQL Server数据库

    本文转自:http://www.cnblogs.com/lhking/archive/2009/06/08/1499002.html 提供把Excel里的数据导入到SQL Server 数据库,前提是 ...

  10. inheritAll 及 ant antfile案例分析

    <?xml version="1.0"?> <project name="a" default="targeta"> ...