使用Underscore.js的template将Backbone.js的js代码和html代码分离

这段时间在学习Require.js和Backbone.js的过程中，发现有些项目里的HTML代码都是写在View的js代码里面的，渲染的时候需要对Collection进行循环，再将HTML代码拼接上去，这似乎不是一件非常好的事情，因为将js代码和html代码融合到一起会增加代码的维护难度，而且这个过程中考虑到性能的因素，需要将HTML代码放到一个数组中，最后进行拼接，代码写起来比较麻烦。我看到他们的代码之后就在考虑是否有一种类似php模板引擎的东西可以将Collection传递进去然后渲染。

我查阅了Backbone.js的手册http://backbonejs.org/#View-template ，里面有一段文字：

However, we suggest choosing a nice JavaScript templating library. Mustache.js, Haml-js, and Eco are all fine alternatives. Because Underscore.js is already on the page, _.template is available, and is an excellent choice if you prefer simple interpolated-JavaScript style templates.

Whatever templating strategy you end up with, it’s nice if you never have to put strings of HTML in your JavaScript.

它建议我们使用js的模板库，而刚好Backbone.js强依赖于Underscore.js所以Underscore.js已经被引入了，它提供了一个_.template方法，这个方法支持使用内嵌js代码的html模板代码，在js代码里没有出现HTML代码是一件非常nice的事情！这正符合了我们MVC的思想，前端的HTML代码也便于维护，要不然就真的成为意大利面条式代码了！

关于Underscore.js的template的说明在http://underscorejs.org/#template ，这里有教你怎么使用。

Template functions can both interpolate variables, using <%= … %>, as well as execute arbitrary JavaScript code, with <% … %>. If you wish to interpolate a value, and have it be HTML-escaped, use <%- … %>

上面这段文字告诉我们在这个模板的代码里面js内嵌代码的标签如何使用，接下来我举一个例子：

我们先建一个template，位于：template/album/index.html

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<%

var title = ‘My albums‘;

document.title = title;

%>

<h1><%= title %></h1>

<p>

    <a href="album-rest/add">Add new album</a>

</p>

<table class="table">

<thead>

    <tr>

        <th>Title</th>

        <th>Artist</th>

        <th> </th>

    </tr>

</thead>

<tbody id="album-list">

<% _.each(albums, function(album) { %>

<tr class="album-row">

    <td><%= album.get(‘title‘) %></td>

    <td><%= album.get(‘artist‘) %></td>

    <td>

        <a href="album-rest/edit/<%= album.get(‘id‘) %>">Edit</a>

        <a href="album-rest/delete/<%= album.get(‘id‘) %>">Delete</a>

    </td>

</tr>

<% }); %>

</tbody>

</table>

下面的这个代码片段是定义了一个Backbone的View，sync属性会去请求服务端获取获取所有album的数据，最后将数据存放到albumList这个Collection里面。随后执行render方法，在render里面this.template = _.template(AlbumTpl, albums);这句代码就是用来完成数据和模板混合的工作的，AlbumTpl来自template/album/index.html，另外必须要将Collection中的所有的model以数组的形式获取到赋给albums，除非你在模板里面又进行了对Collection的解析操作，否则不能只传入一个Collection，因为Underscore.js的template是无法识别Backbone.js的Collection的对象结构的。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

define(["model/album", "collection/album-list", "text", ‘text!template/album/index.html‘], function(Album, AlbumList, text, AlbumTpl) {

    var IndexView = Backbone.View.extend({

        model : Album,

        initialize: function() {

        },

        sync : function (render) {

            var albumList = new AlbumList;

            var view = this;

            Backbone.sync(‘read‘, albumList, {

                success : function (result) {

                    albumList.add(result.ret);

                    view.collection = albumList;

                    view.render();

                }

            });

        },

        render: function() {

            albumList = this.collection;

            albums = albumList.models;

            console.log(_.template(AlbumTpl, albums));

            this.template = _.template(AlbumTpl, albums);

            $("#page-wrapper").html(this.template);

        }

    });

    return IndexView;

});

通过上面的操作，就可以实现js代码和html代码分离了。

http://www.tonitech.com/2160.html

时间： 2024-10-26 15:52:43

使用Underscore.js的template将Backbone.js的js代码和html代码分离的相关文章

require.js+backbone 使用r.js 来压缩，本地不压缩，生产环境压缩 的实现方式

requie.js 和backbone.js 这里就不说了,可以去看官方文档,都很详细! 但是使用require.js 默认带的压缩方式感觉不是很方便,所以本文主要讲 利用r.js压缩,来实现本地不压缩,生产环境压缩 r.js 是运行在node上的,默认使用UglifyJS.UglifyJS真的很好用,那为什么说默认的方式 不是很方便呢? r.js 单独压缩一个文件也很好用的,但在实际项目中,总不能一个一个压吧!因此r.js提供了一种多文件的压缩方式 ,使用一个叫bulid.js 的配置文件来配

require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

requie.js 和backbone.js 这里就不说了,能够去看官方文档,都非常具体! 可是使用require.js 默认带的压缩方式感觉不是非常方便,所以本文主要讲 利用r.js压缩,来实现本地不压缩,生产环境压缩 r.js 是执行在node上的,默认使用UglifyJS.UglifyJS真的非常好用,那为什么说默认的方式 不是非常方便呢? r.js 单独压缩一个文件也非常好用的,但在实际项目中.总不能一个一个压吧!因此r.js提供了一种多文件的压缩方式 ,使用一个叫bulid.js 的配

使用knockout.js 完毕template binding

//1.template <script id="txn-details-template" type="text/html"> <!--Status 0 : Success , Status 1 : Processing , Status 2 : Rejected--> <div class="pull-left last-ten-records"> @string.Format(Resx.RecentRec

使用knockout.js 完成template binding

//1.template <script id="txn-details-template" type="text/html"> <!--Status 0 : Success , Status 1 : Processing , Status 2 : Rejected--> <div class="pull-left last-ten-records"> @string.Format(Resx.RecentRec

HTML5 画布上的 Three.js 环境灯光（HTML5 Canvas Three.js Ambient Lighting）

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

JS中单引号/双引号以及外部js引入的一些问题

一.单引号和双引号的用法的问题 在JavaScript中可以使用单引号.双引号,二者也可以混合使用.但是,身为菜鸟的我,却碰到了一些引号的使用问题. <body> <div style="border:1px solid red; height:150px;width:150px;" onclick="alert("test");" id="test">This is a test. </div&

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 今天刚网上看的 不多说直接帖代码---- <head><-----></head><body> <!--向下滚动代码开始--><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p>&

JS中的模块化开发之Sea.JS

模块化开发的好处: 1:减少冲突 2:提高性能 用sea.js为例:sea.js模块库下载地址:http://seajs.org/docs/#downloads 例子:获取非行间样式的模块化开发: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="