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

时间 2019-11-11

标签使用 underscore.js underscore template backbone.js backbone 代码 html 分离栏目 JavaScript 繁體版

原文原文链接

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

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

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.html

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代码也便于维护，要否则就真的成为意大利面条式代码了！java

关于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 <%- … %>app

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

咱们先建一个template，位于：template/album/index.html学习

 
        <% 
       
 
        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的对象结构的。ui

 
        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