<!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. 为joomla加入�下拉菜单的方法

    用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进 ...

  2. 【redis】windows

    官方网站:http://www.redis.io 百度百科:http://baike.baidu.com/view/4595959.htm?fr=aladdin windows下安装redis: 下载 ...

  3. 配置greenplum参数

    在进行一个greenplum安装之前需要进行配置一下相关的系统参数,否则很容易出现意想不到的错误. 1.修改系统参数 编辑 /etc/sysctl.conf ,以下是最小配置 kernel.shmma ...

  4. C#学习之------委托

    1.向窗体中添加控件的最少步骤:                 窗体的句柄为this private System.Windows.Forms.Button button1;             ...

  5. [Swust OJ 191]--迷宫逃离（打表搜索）

      题目链接:http://acm.swust.edu.cn/problem/191/ Time limit(ms): 1000 Memory limit(kb): 65535   江鸟突然想到了一个 ...

  6. pyfits过滤数据更新文件。

    import pyfits as pf import numpy as np import matplotlib.pyplot as plt hdulist = pf.open("LE_ev ...

  7. CPU自制入门——笔记

    最近在看日本人的那本书<CPU自制入门>就开始自己捣鼓.把工程方到QuartusII 里面后发现编译不通过,总是提示找不到头文件.工程的目录架构是这个样子的 而.v文件中的.h 是这么包含 ...

  8. 自定义安装Apache+php+mysql网站服务器环境

    自定义安装Apache+php+mysql 这种方式是比较麻烦的安装方式,需要具有一定的对Apache了解的基础上才能安装,安装顺序就是先安装Apache软件,然后安装php,最后安装mysql.这里 ...

  9. 网页制作之html基础学习3-css样式表

    样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /*  */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...

  10. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...