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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
js格式化时间的方法
Dec 18 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
深入解析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
使用Apache的rewrite技术
2006/06/22 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
Vue2 模板template的四种写法总结
2018/02/23 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python绘制圆柱体的方法
2018/07/02 Python
python读取文本中的坐标方法
2018/10/14 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Django继承自带user表并重写的例子
2019/11/18 Python
自荐信的两点禁忌
2013/10/30 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
周年庆典答谢词
2015/01/20 职场文书
普宁寺导游词
2015/02/04 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
辩护意见书
2015/06/04 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书