Question

typeahead.js使我们能够使用我们选择的引擎为我们的自动填充建议呈现模板，只要引擎实现此API：

// engine has a compile function that returns a compiled template
var compiledTemplate = ENGINE.compile(template);

// compiled template has a render function that returns the rendered template
// render function expects the context to be first argument passed to it
var html = compiledTemplate.render(context);

现在dust.js对此事略有不同：

var compiled = dust.compile("Hello {name}!", "intro");
dust.loadSource(compiled);

由于我已经集成了dust.js，我也想用它来渲染typeahead的建议。我可以包装灰尘的引擎对象并提供所需的API，但我想知道是否有更少侵入性和/或更优雅的方式来做到这一点，例如通过动态地将所需的功能附加到灰尘对象本身？

编辑添加：混合@ user2103008和@Simon所拥有的内容，这是我在使用typeahead-0.9.3时所使用的内容：

function typeaheadFakeCompile(dustTemplateName) {
    return function(data) {
        var html;
        dust.render(dustTemplateName, data, function(err, out) { html = out; })
        return html;
    }
}

var compiled = dust.compile('Hello {name}!', 'myTemplate');
dust.loadSource(compiled);

$('selector').typeahead({
   template: typeaheadFakeCompile('myTemplate')
)};

Answer 1

传递给typeahead插件的template参数可以是编译模板或字符串。如果它是一个字符串，那么typeahead插件将尝试编译它。不要用灰尘做这件事。相反，像正常一样编译灰尘模板，但将模板参数传递为：

var compiled = dust.compile('Hello {name}!', 'myTemplate');
dust.loadSource(compiled);

$('selector').typeahead({
    template: fakeCompile('myTemplate')
)};

function fakeCompile (dustTemplateName) {
    return {
        render: function (data) {
            var html;
            dust.render(dustTemplateName, data, function (err,out) { html = out });
            return html;
        }
    }
}

Typeahead应该按原样使用“编译”模板而不尝试其他编译。

修改的感谢@ user2103008，修复了灰尘渲染回调函数签名。

使dust.js能够呈现typeahead.js模板的最少侵入性方法是什么？

1 个答案: