Question

组装前端事项YAML支持使用此语法在Handlebar页面顶部创建动态数据模型

 ---
 myModel : { aFile : <%= fileName %>}
 ---

<div>
 {{myModel.aFile.someProperty}}
</div>

其中fileName是一些json文件。是否可以在创建它之后，在传递给渲染之前在YAML中操作myModel。这段代码不起作用，但我想做类似的事情：

 ---
 myModel : { aFile : <%= fileName %>}
 myModel
    aFile
      someProperty : I was set in header 
 ---

如果失败了，怎么能在标题中动态生成数据呢？我可以调用一个自定义帮助器并将其输出传递给变量，再一次这不起作用，但假设：

 ---
 myModel : { data: <%= someHelper('fileName') %> }
 ---

Answer 1

您当然可以使用自定义Handlebars帮助程序来执行此操作，该帮助程序可以根据需要格式化数据。

<强> Gruntfile.js

assemble: {
    mySite: {
        options: {
            helpers: ['source/helpers/**/*.js']

<强>源/助手/ importJSON.js

(function() {
    "use strict";

    var _ = require("lodash");
    var fs = require("fs");

    module.exports.register = function(Handlebars, options) {
        Handlebars.registerHelper("importJSON", function(fileSpec, options) {
            var customData = JSON.parse(fs.readFileSync(fileSpec, "utf8"));

            // Do anything to your data here
            if (customData.color === "blue") {
                customData.color = "yellow";
            }

            _.extend(this, customData);
            return "";
        });
    };

}).call(this);

<强>源/模板/ somePage.hbs

---
{{importJSON "./source/data/favorite.json"}}
{{log color}}
<html>
<body>
    <h1>Some Page</h1>
</body>
</html>

在Assemble中的yaml前端创建复杂的数据模型

1 个答案: