在 Handlebars.js 辅助方法中编译 LESS答案

【问题标题】：Compiling LESS in Handlebars.js helper method在 Handlebars.js 辅助方法中编译 LESS
【发布时间】：2013-12-17 23:47:06
【问题描述】：

这是一个 Meteor.js 应用程序。我需要将用户定义的自定义 CSS 样式注入页面。更好的是——我需要解析这个 CSS，重新格式化它，添加一些额外的样式，然后将它注入到页面中。

把手用作视图模板。所以，在模板中我有这个：

<style id="custom_styles">
  {{#parseLess}} {{{custom_css}}} {{/parseLess}}
</style>

parseLess实际上是一个 Handlebars 辅助方法。这里是：

Handlebars.registerHelper("parseLess", function(options){
  return utils.parseLess(options.fn(this));
});

在utils.parseLess 方法中，我使用LESS CSS 编译器来编译最终的CSS。这是一个sn-p：

var parser = new less.Parser;
parser.parse(updatedSource, function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
    return tree.toCSS();
});

现在棘手的部分是parser.parse() 方法似乎是异步的。这打破了整个链条。回调方法被正确调用，但它的内容从未传递回 Handlebars 模板。

问题 - 如何将异步 LESS 解析器与 Handlebars 助手联系起来？或者，有没有更好的方法来处理我看不到的整个事情？

任何想法都将受到高度赞赏。

到目前为止我的想法：

摆脱 LESS 解析 - 这不是一个好主意，因为我依赖 LESS 解析，在这种情况下，我必须重新实现相同类型的解析。
获取回调方法以将呈现的内容直接插入到文档中 - 再次，并不是很好，因为它破坏了管道和模板模型方法

【问题讨论】：

标签： javascript meteor less handlebars.js

【解决方案1】：

请注意，在您的代码中，return tree.toCSS(); 不会从 utils.parseLess 方法返回，而只会从回调函数返回。我怀疑你应该把它改写成这样（顺便说一句，两次调用tree.toCSS 也是很糟糕的主意）：

var parser = new less.Parser;
var cssResult;
parser.parse(updatedSource, function (err, tree) {
    if (err) {
        return console.error(err);
    }
    cssResult = tree.toCSS();
    console.log(cssResult);
});

return cssResult; // this is the return from utils.parseLess

不，parser.parse() 不是异步的，它会在您的回调函数返回时返回。

【讨论】：