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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 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和javascript常用正则表达式及用法实例
2014/07/01 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
webpack打包react项目的实现方法
2018/06/21 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python使用RNN实现文本分类
2018/05/24 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
python反扒机制的5种解决方法
2021/02/06 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
公司采购主管岗位职责
2014/06/17 职场文书
起诉状范本
2015/05/20 职场文书
预备党员党支部意见
2015/06/02 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书