Question

这是一个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。这是一个片段：

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解析，在这种情况下，我将不得不重新实现相同类型的解析。
获取回调方法以将呈现的内容直接插入到文档中 - 再次，不是很好，因为它打破了管道和模板模型方法

Answer 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()不是异步的，它会在你的回调函数返回时返回。

在Handlebars.js帮助方法中编译LESS

1 个答案: