使用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
使用Underscore.js的template将Backbone.js的js代码和html代码分离相关推荐
- 使用underscore模块的template功能实现对HTML的数据注入+template实现数据注入(后面更新)
使用underscore模块的template功能实现对HTML的数据注入 安装underscore 代码是:npm i underscore 查看是否安装成功 server.js文件 var htt ...
- vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
- js获取el表达式的值_Vue.js
一.Vue.js 介绍 基本概念 Vue是一套用于构建用户界面的渐进式框架,可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一 方面,当与现代化的工 ...
- node.js使用手册_权威的Node.js手册
node.js使用手册 Note: you can get a PDF, ePub, or Mobi version of this handbook for easier reference, or ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- http://open.map.qq.com/c/=/apifiles/2/4/71/mods/common.js,apifiles/2/4/71/mods/map.js 腾讯地图 Vue3 解决方案
报错信息 http://open.map.qq.com/c/=/apifiles/2/4/71/mods/common.js,apifiles/2/4/71/mods/map.js,apifiles/ ...
- Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?
2019独角兽企业重金招聘Python工程师标准>>> 浏览器正在逐步的支持原生JavaScript模块.Safari和Chrome的最新版本已经支持它们了,Firefox和Edge ...
- vue.js部署_如何将安全Vue.js应用程序部署到AWS
vue.js部署 本文最初发布在Okta开发人员博客上 . 感谢您支持使SitePoint成为可能的合作伙伴. 编写Vue应用程序直观,直接,快捷. Vue具有较低的进入门槛,基于组件的方法以及诸如热 ...
- JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
- 用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本
用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行. 可以访问和 ...
最新文章
- android 刷机 备份,安卓刷机后如何还原以前ROM和系统备份
- 如何优雅的解决mac安装zsh不执行.bash_profile
- 写给想当程序员的朋友
- 小程序 mpvue input 文本控制
- php上老师查看作业,请老师查阅俺的作业效果,看还满意不
- 基于SSM框架的高校实验室管理系统PPT模板
- [Python3 填坑] 008 索引君的朋友 in
- js动态添加的元素如何设置点击事件
- 在VS2017中添加WTL窗口
- 小程序创建搜索记录,获取搜索记录,删除搜索历史
- 有哪些好用的在线电影影视导航网站
- 怎么实现使用手机号、邮箱、用户名登录
- android+农历月份大小压缩表,部分日期农历新历转换会崩溃
- win10系统禁用笔记本自带键盘
- BeanUtils.populate()方法的简单使用
- SpringCloud中Feign进行服务调用 java.io.IOException: too many bytes written 问题解决
- SWUST OJ 67: 学生成绩管理
- PSTN 与 PBX 业务
- 景安服务器怎么上传网站程序,Web服务器是如何被应用服务器“收编”的?
- mysql按月统计最近一年,半年数量,本月每一天
热门文章
- Fedora7安装后的配置
- java 判断是合法语言_使用Java 怎么实现一个判断IP地址是否合法的功能
- 代码换行符_Excel办公技巧:如何定位、替换、清除单元格中的换行符?
- java安卓开发异步任务_Android笔记4-android之多线程和异步任务
- 内核中断,异常,抢占总结篇
- 请求发送者与接收者解耦——命令模式(四)
- Linux内核中的PID散列表实例
- 16g电脑内存有什么好处_电脑内存容量都是16GB, 买单根16G好还是双根8G好呢?
- C++与STL简单介绍( C/C++机试)
- 比较x^y和y^x的大小