如何为UnderscoreJS模板制作聚合模板文件

时间：2014-04-17 22:31:52

标签： javascript node.js templates underscore.js-templating

简介

我正在尝试创建一个包含所有UnderscoreJS模板的聚合文件。我将解释如何使用带有Java后端的JSP应用程序实现这一目标。

我是如何在JSP应用程序中使用它的：

使用jsp页面时，您可以：

<html>
<head> ... </head>
<body>
  ...
  <jsp:include page="./path/to/aggregate_templates.jsp"/>
</body>
</html>

在此文件中，您可以将所有UnderscoreJS模板列为如下：

<jsp:include page="./path/to/js/view/home/file.template"/>
<jsp:include page="./path/to/js/view/home/file2.template"/>
...

问题

我使用的是NodeJS服务器，而不是Java后端。有没有办法可以动态地使用聚合模板文件，它与jsp：include一样？或者是我唯一的选择：Templating using RequireJS (text.js plugin) and Underscore？

1 个答案:

答案 0 :(得分：0)

解决方案：

将所有* .template文件与fileUtil.aggregateTemplates（）一起附加到aggregate.template
在浏览器中加载index.html时，main.js会运行
在做任何其他事情之前，main.js调用TemplateCache.setup（）
TemplateCache.setup（）将aggregate.template的内容添加到$（＆＃34;＃templates＆＃34;）
所有模板现在都在html和Backbone视图中。处置

代码：

在app.js

...
var fileUtil = require('./utils/file-util');
var aggregateTemplateFile = 'path/to/aggregate.template';
var targetDir = 'path/to/directory/containing/template/files';
fileUtil.aggregateTemplates(targetDir, aggregateTemplateFile);
...

在file-util.js

var fs = require('fs');
var path = require('path');

/**
 * Traverse the directory
 * @param dir - directory to traverse
 * @param cond - callback for determining whether or not to keep file
 * @param done - callback for what to do with results
 */
var walk = function(dir, cond, done){
    var results = [];
    fs.readdir(dir, function(err, list){
        if(err){
            return done(err);
        }
        var i = 0;
        (function next(){
            var file = list[i++];
            if(!file){
                return done(null, results);
            }
            file = path.resolve(dir, file);
            fs.stat(file, function(err, stat){
                if(stat && stat.isDirectory()){
                    walk(file, cond, function(err, res){
                        results = results.concat(res);
                        next();
                    });
                }else{
                    if(cond(file)){
                        results.push(file);
                    }
                    next();
                }
            });
        })();
    });
};

/**
 * Create aggregate file
 * @param fileArr - array of files (full path)
 * @param targetFile - file to print to (full path)
 * @param strictOrder - (optional) boolean whether or not to enforce order
 */
var createAggregate = function(fileArr, targetFile, strictOrder){
    if(!fileArr || fileArr.length<1){
        return;
    }
    fs.writeFileSync(targetFile, ""); // clear file
    if(strictOrder){
        var i = 0;
        (function next(){
            var file = fileArr[i++];
            if(!file){
                return;
            }
            fs.readFile(file, function(err, data){
                if(err) throw err;
                fs.appendFileSync(targetFile, data);
                next();
            });
        })();
        return;
    }
    for(var i=0; i<fileArr.length; i++){
        var file = fileArr[i];
        fs.readFile(file, function(err, data){
            if(err) throw err;
            fs.appendFileSync(targetFile, data);
        });
    }
};

/**
 * Create an aggregate template file
 * @param targetDir - directory to look in (full path)
 * @param targetFile - file to print to (full path)
 */
exports.aggregateTemplates = function(targetDir, targetFile){
    // Determine what kind of files we care about
    var isTemplate = function(file){
        return file.match(/.+\.template$/);
    };
    // Determine what we do with the results
    var done = function(err, result){
        if(err) throw err;
        createAggregate(result, targetFile);
    };
    // Traverse the target directory
    walk(targetDir, isTemplate, done);
};

在index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap-custom.css">
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="/stylesheets/style-responsive.css">
</head>
<body class="center-on-page">
    <div id="header" class="affix"></div>
    <div id="content"></div>

    <div id="javascript">
        <!-- JavaScript Library Imports -->
        <!-- JavaScript Local Imports -->

        <!-- Code Entry Point -->
        <script type="text/javascript" src="/js/main.js"></script>
    </div>

    <!-- Underscore Templates -->
    <div id="templates"></div>
</body>
</html>

在main.js

(function(){

$.when(app.util.TemplateCache.setup())
    .done(function(){
        // Start the router
        new app.Router();
        Backbone.history.start();
    });

})();

app.util.TemplateCache.setup

app.util.TemplateCache.setup = function(){
    var opts = { url: "aggregate.template" };
    return $.ajax(opts)
        .done(function(data, textStatus, jqxhr){
            console.log("Loaded aggregate template file");
            $("#templates").html(data);
        })
        .fail(function(data, textStatus, jqxhr){
            console.log("Failed to load aggregate template file");
        });
};