underscore模板功能的使用和学习

标签：

最近好忙啊，各种项目急着上线。css调的头晕脑胀，再也没时间琢磨我那可爱的js小妖精了。

不过在百忙中还是要表达一下对underscore.js的感谢，小巧轻便的实现了我的需求。具体说一下情况，开会的时候约定接口，

我当时夸下海口跟后台大哥拍着胸脯说，你给我一段json，我还你一个前端（肠子已经悔青）

于是后台那位耿直的兄弟真的就去这么做了，把所有的接口都是封装成json格式的数据给到我。

开始干活了，一开始我的处理方法是用ajax请求到数据后，拿出来放到自己的函数中使用js操作dom完成各种需求。越写就会

发现越头疼，慢慢的数据量多了，接口也多了。就在头疼之时遇到了underscore，里面提供了一个很好的模板功能_.template

使用类似于jsp的写法<%=item.film%>来替换json中对应的数据，不仅使得数据与页面分离开来，还很好的提高了代码的可维

护性。下面来仔细说说这个underscore：

将 JavaScript 模板编译为可以用于页面呈现的函数, 对于通过JSON数据源生成复杂的HTML并呈现出来的操作非常有用。 模板函数可以使用 <%= … %>插入变量, 也可以用<% … %>执行任意的 JavaScript 代码。 如果您希望插入一个值, 并让其进行HTML转义,请使用<%- … %>。 当你要给模板函数赋值的时候，可以传递一个含有与模板对应属性的data对象 。 如果您要写一个一次性的, 您可以传对象 data 作为第二个参数给模板 template 来直接呈现, 这样页面会立即呈现而不是返回一个模板函数. 参数 settings 是一个哈希表包含任何可以覆盖的设置 _.templateSettings.

var compiled = _.template("hello: <%= name %>");
compiled({name: ‘moe‘});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: ‘<script>‘});
=> "<b>&lt;script&gt;</b>"

您也可以在JavaScript代码中使用 print. 有时候这会比使用 <%= ... %> 更方便.

var compiled = _.template("<% print(‘Hello ‘ + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

如果ERB式的分隔符您不喜欢, 您可以改变Underscore的模板设置, 使用别的符号来嵌入代码.定义一个 interpolate 正则表达式来逐字匹配嵌入代码的语句, 如果想插入转义后的HTML代码则需要定义一个 escape 正则表达式来匹配,还有一个 evaluate 正则表达式来匹配您想要直接一次性执行程序而不需要任何返回值的语句.您可以定义或省略这三个的任意一个.例如, 要执行Mustache.js类型的模板:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

默认的, template 通过 with 语句来取得 data 所有的值. 当然, 您也可以在 variable 设置里指定一个变量名. 这样能显著提升模板的渲染速度.

_.template("Using ‘with‘: <%= data.answer %>", {variable: ‘data‘})({answer: ‘no‘});
=> "Using ‘with‘: no"

预编译模板对调试不可重现的错误很有帮助. 这是因为预编译的模板可以提供错误的代码行号和堆栈跟踪, 有些模板在客户端(浏览器)上是不能通过编译的 在编译好的模板函数上, 有 source 属性可以提供简单的预编译功能.

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

官方api的所有说明，可以说很清晰很明朗，于是乎下面的代码诞生了：

 <%_.each(datas, function(item) {%>
            <div class="outer">
                <div class="title">
                    <span ><%=item.film%></span>
                </div>
                <ul class="ul">
                    <%_.each(datas, function(item) {%>
                        <li>
                            <a href="<%=item.url%>">【<%=item.title%>】</a>
                        </li>
                    <%});%>
                </ul>                        
            </div>
        <%});%>

数据json是：

var datas = [{
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}, {
    name: "平安",
    price: "7183.81",
    url: "www.pingan.com"
}];

调用语句：

$(".containerF").html(_.template($("#t2").html(), datas));

想放在哪个div下面就放在哪个div下面，只需要改变类名.containerF

underscore模板功能的使用和学习

标签：

原文地址：http://www.cnblogs.com/clarencexu/p/4702555.html