javascript - 无法理解如何在 typeahead 0.10.1 中使用 alt 模板引擎

Question

我知道我可以使用 handlebars 来模拟使用 typeahead 的自定义模板样式。

$('#ItemLookup2').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
    suggestion: Handlebars.compile([
             '<p class="repo-language">{{Barcode}}</p>',
            '<p class="repo-name">{{sellPrice}}</p>',
            '<p class="repo-description">{{description}}</p>'
        ].join(''))
    }
});

这很好。

但是如果我想使用 Mustache.render 或 Hogan.compile 呢？

$('#ItemLookup2').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
        suggestion: Hogan.compile([
             '<p class="repo-language">{{Barcode}}</p>',
            '<p class="repo-name">{{sellPrice}}</p>',
            '<p class="repo-description">{{description}}</p>'
        ].join(''))
    }
});

抛出异常 TypeError: that.templates.suggestion is not a function.

我也试过

   var Suggestion = Mustache.render('<p class="repo-language">{{Barcode}}</p>');
$('#ItemLookup2a').typeahead(null, {
    displayKey: 'description',
    source: values.ttAdapter(),
    templates: {
            suggestion:Suggestion.join('')
    }
});

但是得到 TypeError: Suggestion.join is not a function

有人可以给我一些指示吗？

谢谢，

卡尔

Answer 1

这对我有用。

var templ =  Hogan.compile([
         '<p class="repo-language">{{Barcode}}</p>',
        '<p class="repo-name">{{sellPrice}}</p>',
        '<p class="repo-description">{{description}}</p>'
    ].join(''));

$('#ItemLookup2').typeahead(null, {
  displayKey: 'description',
  source: values.ttAdapter(),
  templates: {
    suggestion: function (data) { return templ.render(data); }
  }
});

查看源代码typeahead 10如何调用模板函数。 我只使用 getFooterHtml 片段，getSuggestionsHtml 的工作原理几乎相同，但传递不同的数据并做一些额外的工作。

            function getFooterHtml() {
                return that.templates.footer({
                    query: query,
                    isEmpty: !hasSuggestions
                });
            }

我们应该显式调用render 函数来渲染Hogan/Mustache。 Hogan.compile('sample {{data}}').render({"data": 'hey'}); 但是，Handlebars 可以像这样工作。 Handlebars.compile('sample {{data}}')({"data": 'hey'});

因此，Handlerbars 的问题片段 1 可以工作，但 Hogan/Mustache 应该做一些包装工作。