JavaScript的Backbone.js框架环境搭建及Hellow world示例


Posted in Javascript onMay 07, 2016

环境准备
在正式学习Backbone之前,你需要准备一些东西:
首先,你需要获取Backbone框架源文件:http://documentcloud.github.com/backbone/
Backbone依赖于Underscore框架的基础方法,因此,你同时需要下载Underscore框架的源文件:http://documentcloud.github.com/underscore/
在Backbone中,对DOM和事件的操作依赖于第三方库(如jQuery或Zepto),你只需要选择其中一个下载:
jQuery:http://jquery.com/
Zepto:http://zeptojs.com/
看起来好像挺麻烦的样子,但Backbone的目的是在于使用简单的框架来构建复杂的应用,因此麻烦并不表示它很复杂。
你可以新建一个HTML页面,并将这些框架引入进来,就像这样:

<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="underscore/underscore-min.js"></script> 
<script type="text/javascript" src="backbone/backbone-min.js"></script>

至此,你已经准备好了运行Backbone必须的环境。

Hellow World
先来说一下这个helloworld的功能: 在页面上有一个报道的按钮,点击弹出输入框,输入内容,确认,最后内容会加到页面上。页面图如下:

JavaScript的Backbone.js框架环境搭建及Hellow world示例

下面来看代码:

<!DOCTYPE html>
<html>
<head>
    <title>the5fire.com-backbone.js-Hello World</title>
</head>
<body>
<button id="check">报到</button>
<ul id="world-list">
</ul>
<a href="http://www.the5fire.com">更多教程</a>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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>
<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>
</html>

我认为代码是直观的,这里面涉及到backbone的三个部分,view、model、collection,以后都会提到,这里只要了解,model代表一个数据模型,collection是模型的一个集合,而view是用来处理页面以及简单的页面逻辑的。

Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 #Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 #Javascript
JavaScript数组方法总结分析
May 06 #Javascript
JS平滑无缝滚动效果的实现代码
May 06 #Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 #Javascript
JavaScript中的原型继承基础学习教程
May 06 #Javascript
jquery实现下拉框功能效果【实例代码】
May 06 #Javascript
You might like
在PHP中使用模板的方法
2008/05/24 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
python添加模块搜索路径方法
2017/09/11 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
AJax面试题
2014/11/25 面试题
行政文员岗位职责
2013/11/08 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
入党思想汇报
2014/01/05 职场文书
学生生病请假条范文
2014/02/16 职场文书
公司授权委托书范本
2014/04/03 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
西湖英语导游词
2015/02/06 职场文书
行政助理岗位职责
2015/02/10 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫