handlebars.js - 提前在建议末尾添加一条自定义行

Question

是否有可能在所有建议的末尾添加自定义行？我想添加一个“显示更多建议”，该链接是指向另一页的链接。

$(function(){

var countries = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url : '/json/temp/countries.json',
    filter: function(list) {
      return $.map(list, function(country) { return { name: country }; });
    }
  },
});

countries.initialize();

$('.component-search-button .ui-input input').typeahead(null, 
{
   highlight: true,
   name: 'countries',
   displayKey: 'name',
   source: countries.ttAdapter(),
   templates: {
     empty: [
       '<div class="empty-message">',
          '<i>Unfortunatelly we coud not find items that match the current query. Please    try again.</i>',
       '</div>'
     ].join('\n'),
     suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
   }
 }
);


});

它遵循有关Git的基本示例。我看到错误消息在"template"中的“空”处触发，它提供了一个选项，可以在完整的列表或类似的对象上触发。

非常感谢您的帮助。

Answer 1

好的，我找到了自己的答案。从Typeahead API:

Datasets can be configured using the following options.

source – The backing data source for suggestions. Expected to be a function with the signature (query, cb). It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set. cb can be invoked synchronously or asynchronously. A Bloodhound suggestion engine can be used here, to learn how, see Bloodhound Integration. Required.

name – The name of the dataset. This will be appended to tt-dataset- to form the class name of the containing DOM element. Must only consist of underscores, dashes, letters (a-z), and numbers. Defaults to a random number.

displayKey – For a given suggestion object, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to value.

templates – A hash of templates to be used when rendering the dataset. Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string.

empty – Rendered when 0 suggestions are available for the given query. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query.

footer– Rendered at the bottom of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

header – Rendered at the top of the dataset. Can be either a HTML string or a precompiled template. If it's a precompiled template, the passed in context will contain query and isEmpty.

suggestion – Used to render a single suggestion. If set, this has to be a precompiled template. The associated suggestion object will serve as the context. Defaults to the value of displayKey wrapped in a p tag i.e.

{{value}}

.

因此，必须做的是:

templates: {
 empty: [
    '<div class="empty-message">',
      '<i>Unfortunatelly we coud not find items that match the current query. Please try again.</i>',
    '</div>'
  ].join('\n'),
  footer : [
    '<div class="more-results">',
      '<a href="#">More Results</a>',
    '<div>'
  ].join('\n'),
  suggestion: Handlebars.compile('<p>{{name}}</p>')
}

希望这对某人有帮助:)