Javascript 如何为下划线JS模板创建聚合模板文件简介_Javascript_Node.js_Templates_Underscore.js Templating

Javascript 如何为下划线JS模板创建聚合模板文件简介

javascript node.js templates

Javascript 如何为下划线JS模板创建聚合模板文件简介,javascript,node.js,templates,underscore.js-templating,Javascript,Node.js,Templates,Underscore.js Templating,我正在尝试创建一个包含所有下划线模板的聚合文件。我将解释如何使用带有Java后端的JSP应用程序实现这一点我是如何在我的JSP应用程序中工作的：使用jsp页面时，您可以执行以下操作： <html> <head> ... </head> <body> ... <jsp:include page="./path/to/aggregate_templates.jsp"/> </body> </html>

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

我是如何在我的JSP应用程序中工作的：使用jsp页面时，您可以执行以下操作：

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


... 
...

在此文件中，您可以列出所有的下划线JS模板，如下所示：

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

...

问题: 我使用的不是Java后端，而是NodeJS服务器。有没有一种方法可以让聚合模板文件执行与jsp:include相同的操作？或者我唯一的选择是这样的：？

解决方案：

将所有*.template文件与fileUtil.aggregateTemplates（）一起追加到aggregate.template中

在浏览器中加载index.html时，main.js将运行

在执行其他操作之前，main.js调用TemplateCache.setup（）

setup（）将aggregate.template的内容添加到$（“#templates”）

所有模板现在都在html中，由主干视图处理

守则：在app.js中在file-util.js中 app.util.TemplateCache.setup

如果我理解正确的话，你的问题是你能将多个文本文件的输出与node合并成一个文本文件吗？事实上，是的。最好是Node合并模板文件，然后只提供聚合模板文件。另一个选项是让某些东西监视我的.template文件，如果其中任何文件发生更改，它将更新聚合模板文件。

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

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

<!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>

(function(){

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

})();

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");
        });
};