Typeahead.js - 模板设置被忽略。

Question

我正在尝试使用Typeahead.js设置自定义模板。

我的代码如下：

var countries = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        url: 'http://www.domain.com/json.php?action=countries&q=%QUERY'
    }
});

countries.initialize();

$('.lang').typeahead(null, {
    name: 'countries',
    source: countries.ttAdapter(),
    template: [
        '<p class="lang-id">{{lang_id}}</p>',
        '<p class="value">{{value}}</p>'
    ].join(''),
    engine: Hogan
});

它能正常运行，但模板设置被忽略了 - 我仍然得到默认的下拉菜单。我做错了什么吗？

编辑：我还尝试过：

$('input').typeahead(null, {
  name: 'countries',
  displayKey: 'value',
  source: countries.ttAdapter(),
  templates: {
     empty: [
      '<div class="empty-message">',
      'no results found',
      '</div>'
    ].join('\n'),
    suggestion: '<p><strong>{{value}}</strong> – {{id}}</p>'
  },
  engine: Hogan
});

这段文字的意思是：“出现了一个错误：对象#的属性'suggestion'不是一个函数。”

- user1049961

Answer 1

看一下文档，你会发现名称是templates而不是像你在第二个例子中展示的template。你遇到的问题是suggestion需要是一个函数，而不是一个字符串。在自定义模板的底部示例中，你可以看到他们使用了Handlebars.compile，它返回一个函数，该函数接受一个包含要呈现模板的数据的单个参数，并返回生成的HTML字符串。如果你不想使用Handlebars，你可以做类似的事情（请注意，为简单起见，在我的示例中我没有转义数据。对于正确的解决方案，你应该转义data.value和data.id以确保你不会引入XSS漏洞）：

$('input').typeahead(null, {
  name: 'countries',
  displayKey: 'value',
  source: countries.ttAdapter(),
  templates: {
     empty: [
      '<div class="empty-message">',
      'no results found',
      '</div>'
    ].join('\n'),
    suggestion: function(data){
      return '<p><strong>' + data.value + '</strong> - ' + data.id + '</p>';
    }
  },
  engine: Hogan
});

- kastermester

---

谢谢，这个运行得非常好！使用Handlebars和Hogan有什么优势吗？ - user1049961

我并不真正了解Hogan，所以我在这里可能是完全错误的。但是从文档中稍微看一下，它看起来相当不错 - 我猜你可以随意选择其中一个而没有任何问题。 - kastermester

我看到很多示例都使用join('\n')部分。为什么不使用“+”呢？ - bart

由于某些原因，使用此代码时，建议函数调用中的数据对我来说是未定义的。 - Wrench

这是 未定义的，因为它必须是实际的记录字段，例如 data.name 等。 - yuяi