使用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; 
       
        });