backbone.js是什么

标签： 计算机技术 backbone.js javascript | 发表时间：2012-03-16 18:01 | 作者：Marshal

出处：http://marshal.easymorse.com

backbone.js，是开发web app的框架。凭借它，我们可以使用javascript编写复杂交互的web app，因为backbone提供了强大的对模型、视图和交互的抽象。以前，我们开发web app，比较依赖比如jQuery：

将所有交互看作对dom节点的操作，虽然也可通过事件（event）解藕复杂的交互，但是无法脱离dom模型，包括事件的传递，都是沿着dom树进行的；
即使是有起到模型作用的对象，一般也通过jQuery附着在dom树上

backbone.js为我们提供了一个使用javascript，在浏览器上，编写符合MVC模式web app的途径。下面，通过编写最简单的应用，方便初学者上手。因为很简单，就不截图了，页面不显示任何内容，只通过console打印一行日志。

backbone和最简单的模型

backbone只硬性依赖underscore.js，后者是底层库，另外，为了和页面结合，还是需要用到jQuery的，比如需要页面加载后做处理，因此在html页面中需要：

<script type=”text/javascript” src=’Scripts/underscore-min.js’></script> <script type=”text/javascript” src=’Scripts/backbone-min.js’></script> <script type=”text/javascript” src=’Scripts/jquery-1.7.1.min.js’></script>

body部分我只写了一行代码：

<body> <script type=”text/javascript” src=’Scripts/app.js’></script> </body>

这时候，还未用到backbone.js，下面，app.js：

$(document).ready(function () { var Item = Backbone.Model.extend({ hello:function(){ console.log(‘hello world’); } }); var item=new Item; item.hello(); });

可以把第一部分，看作java中的创建了类Item，声明了hello方法。这里的Model，是backbone的最基本组成部分，模型部分。extend，实际调用的是underscore的方法，可在js对象上扩展属性和方法。第二部分，看起来类似java的创建实例，并执行实例方法。有了模型，下面就需要考虑，怎么把模型显示到网页上。

backbone模型怎样显示在网页上

模型里当然可以增加属性，类似javabean的属性，因为是解释型语言，因此可以不需要声明就直接设置：

$(document).ready(function () { var Item = Backbone.Model.extend({ }); var item=new Item; item.title=’stabilo彩色铅笔’; item.price=24.50;

那么，我怎么将模型显示到网页上呢，比如这样：

如果用过服务器端开发引擎，都应该知道模型＋模板，渲染，生成页面的过程。backbone也使用了类似的模式。

编写一个简单的模板：

<script type=”text/template” id=”item-tmpl”>
<div>标题：${title}</div>
<div>价格：${price}</div>
</script>
</head>

因为不参与显示，这个模板节点，写head部分了。可以发现语法类似jstl el表达式，或者以前的velocity模板引擎。

如何将模板和模型渲染，backbone.js并没有提供功能，但借助javascript灵活的特点，可以很容易的使用各种模板方案。我这里写个简单的，使用jQuery的tmpl插件，可在jQuery官方网站下载，不过，这个插件已经不更新了，我后续会介绍其他模板方案。

下载该插件后：

<script type=”text/javascript” src=’Scripts/jquery.tmpl.js’></script>

然后，需要在html body里增加一个div，用于加载渲染后的输出：

<div id=”itemContent”></div>

剩下的就是js代码了：

var ItemView=Backbone.Model.extend({
el:$(‘#itemContent’),
template:$(‘#item-tmpl’).template(),

render:function(){
console.log(‘render’);
$.tmpl(this.template,this.model).appendTo(this.el);
return this;
}
});

var itemView=new ItemView;
itemView.model=item;
itemView.render();
});

这里，ItemView也是一个模型。它包含渲染输出的节点（el），模板对象，这里用到了jQuery tmpl插件的方法，另外需要编写一个render函数，这个函数中执行渲染并加载到指定dom节点下。

源代码见这里： https://github.com/MarshalW/BackBoneDemo/tree/v0.1

看起来还不错，不过也许，实现这个需求，使用backbone过于复杂了。是的，因为backbone适合复杂交互的应用开发，它的功能远不只这点儿。如果只是开发简单的交互，或者是开发一个网页而不是应用（app），那么就不适合使用backbone。

backbone.js是什么

backbone和最简单的模型

backbone模型怎样显示在网页上

相关 [backbone js] 推荐：

backbone 之事件(events)

通过helloworld来认识下backbone - Ruthless

DNSPod国内版全新亮相:前端使用Backbone技术

WebView JS 交互

JS游戏引擎

來源請求.js

Js删除节点

JS游戏引擎列表

Deck JS: HTML5 幻灯片

JS三维模型库 Three.js

相关文章

订阅