如何重置typeahead.js中使用的Hogan.js模板

时间:2013-07-18 19:49:24

标签: javascript typeahead.js hogan.js

我对Hogan.js和typeahead.js都很陌生,所以这个问题可能很愚蠢。

$('.example-twitter-oss .typeahead').typeahead({                              
      name: 'twitter-oss',                                                        
      prefetch: 'repos.json',                                             
      template: [                                                                 
        '<p class="type">{{language}}</p>',                              
        '<p class="name">{{name}}</p>',                                      
        '<p class="description">{{description}}</p>'
      ].join(''),
      engine: Hogan
});

这就是我用Hogan.js作为模板创建typeahead.js实例的方法。 现在我想更改我的测试数据:'repos.json',模板仍然是相同的。我想它以某种方式缓存了。如何重置模板以包含新数据?

我看到hogan有一个compile();和render()方法,但我不明白如何使用它。

我使用两者的最新版本。

1 个答案:

答案 0 :(得分:3)

在当前版本的typeahead.js(0.9.3)中,数据集由其name属性缓存,无法bust the cache。所以如果你有:

$('.example-twitter-oss .typeahead').typeahead({
  name: 'twitter-oss',                                                        
  prefetch: 'repos.json',                                             
  template: [                                                                 
    '<p class="type">{{language}}</p>',                              
    '<p class="name">{{name}}</p>',                                      
    '<p class="description">{{description}}</p>'
  engine: Hogan
});

$('.example-something-different .typeahead').typeahead({
  name: 'twitter-oss',
  prefetch: 'something_different.json'
});

.example-something-different .typeahead不会使用指定的配置,它会使用.example-twitter-oss .typeahead指定的配置,因为它们使用相同的name。这不是直观的,它将在下一个版本v0.10中发生变化。但是现在,您可以通过使用不同的name s来解决此问题:

$('.example-twitter-oss .typeahead').typeahead({
  name: 'twitter-oss',
  prefetch: 'repos.json',
  template: [
    '<p class="type">{{language}}</p>',
    '<p class="name">{{name}}</p>', 
    '<p class="description">{{description}}</p>'
  ].join(''),
  engine: Hogan
});

$('.example-something-different .typeahead').typeahead({
  name: 'something different',
  prefetch: 'something_different.json'
});