【问题标题】:Assemble/handlebars: run custom function defined in external js file组装/车把:运行在外部 js 文件中定义的自定义函数
【发布时间】:2014-02-03 21:19:44
【问题描述】:

鉴于我有这个 javascript 文件

src/js/functions.js

(function() { 

    crc32 = function(str, crc ) { 
    ...
    }; 
})();

此文件是静态网站的一部分,并且我想在模板中使用 crc32(),如下所示:

index.hbs

<script type="text/javascript" charset="utf-8">
    var crc_checksum = {{checksum solution}};
</script>

当然需要一个中间助手

helpers.js

Handlebars.registerHelper('checksum', function(value){
    this.checksum = return value;
});    

我不想将 crc32 代码复制粘贴到帮助程序中(因为这会复制代码)。有没有办法将外部 JS 文件加载到助手的命名空间中?

【问题讨论】:

    标签: handlebars.js assemble


    【解决方案1】:

    您可以以“node.js”的方式构建您的crc32 文件并使用browserify 在您的站点中使用它。还有其他方法可以使您的 crc32 对象在节点和浏览器上都可用。然后你可以在你的帮助文件中require它...

    src/js/functions.js

    (function(exports) {
      exports.crc32 = function (str, crc) { ... };
    })(window || module.exports);
    

    helpers.js

    var crc32 = require('./src/js/functions').crc32;
    Handlebars.registerHelper('checksum', function (value) {
      return crc32(value);
    });
    

    【讨论】:

    • 这正是我想要的,谢谢。我没有使用 browserify(将是另一个依赖项),而是使用 this method of 在节点和浏览器之间共享代码。
    【解决方案2】:

    当然,在创建帮助程序时,只需遵循与任何其他节点库相同的模块模式即可。

    将帮助程序包装在 module.exports.register 函数中:

    module.exports.register = function (Handlebars, options, params) {
      Handlebars.registerHelper('checksum', function(src) {
        return require('your-checksum-lib')(src);
      });
    };
    

    然后确保告诉 Assemble 文件在哪里:

    assemble: {
      options: {
        helpers: ['path/to/checksum.js']
      }
    }
    

    或者...如果 helper 实际上是一个 npm 模块本身,你可以将它添加到 package.json 中的 devDependencieskeywords 中,Assemble 会自动拾取它。例如:

    {
      "name": "foo",
      "devDependencies": {
        "handlebars-helper-checksum": "~0.1.0",
      },
      "keywords": [
        "handlebars-helper-checksum"
      ]
    }
    

    但是,您也可以在 handlebars-helpers 存储库上为此帮助程序提出请求或公关,我们可以将其添加到库中。

    【讨论】:

    • 感谢乔恩。由于该模块不是 npm 模块,我最终使用了带有 js 文件相对路径的 require,并添加了一些代码以使其可用于浏览器和 node.js。通过 options.helpers 告诉 assemble 文件反对使用相对路径要求它的位置有什么好处吗?
    • @PhilippKeller 如果您在./src/helpers/ 之类的文件夹中有多个帮助文件,您可以通过options.helpers 告诉 assemble 将它们全部加载。在这些助手中,您可以为其他模块执行require...assemble: { options: { helpers: ['./src/helpers/**/*.js'] } }
    • 是的,正如@doowb 指出的那样,您可以使用 minimatch/glob 模式一次加载所有助手。这是一个演示我们所描述内容的示例项目:github.com/assemble/buttons/blob/master/Gruntfile.js#L40
    猜你喜欢
    • 2014-04-03
    • 1970-01-01
    • 1970-01-01
    • 2014-10-05
    • 1970-01-01
    • 2018-02-07
    • 2016-12-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多