Question

typeahead.js文档显示了使用Hogan.js的示例，但我将使用Jsrender模板。只要它支持预期的API，就可以使用任何模板引擎。有使用Underscore.js模板的示例。以下是使用Underscore.js通过在文档准备就绪时执行以下JavaScript来支持此功能的配置示例：

 $(function($) {    
      _.compile = function(templ) {
         var compiled = this.template(templ);
         compiled.render = function(ctx) {
            return this(ctx);
         }
         return compiled;
      }
      $('.product-typeahead').typeahead({
         header: '<h3>Products</h3>',
         template: 
       '<p><strong><%= name %></strong>:&nbsp;$<%= price %></p>',
         name: 'products',
         valueKey: 'name',
         engine: _,
         local: [
            {
               id: 0,
               name: "Deluxe Bicycle",
               price: 499.98
            },
            {
               id: 1,
               name: "Super Deluxe Trampoline",
               price: 134.99
            },
            {
               id: 2,
               name: "Super Duper Scooter",
               price: 49.95
            }
         ]
      }).on('typeahead:selected', function(event, datum) {
         $('#productID').val(datum.id);
         $('#productPrice').val("$" + datum.price);
      });
   });

我需要使用JSrender模板引擎实现上面的typehead autocomplete。我尝试过作者Boris Moore在https://github.com/BorisMoore/jsrender/issues/30提供的解决方案。如何使用jsRender实现这一目标？提前谢谢。

Answer 1

您是否尝试过此操作 - 将$.templates包裹为您的引擎：

var jsRenderEngine = {
      compile: $.templates
   };

$('.product-typeahead').typeahead({
   ...
   engine: jsRenderEngine,
   local: [
      ...
   ]
}).on('typeahead:selected', function(event, datum) {
   ...
});

或者扩展$.templates以使其成为您的引擎 - 使其成为自己的“编译”方法！：

$.templates.compile = $.templates;

$('.product-typeahead').typeahead({
   ...
   engine: $.templates,
   local: [
      ...
   ]
}).on('typeahead:selected', function(event, datum) {
   ...
});

如何使用Twitter typeahead.js与Jsrender编译功能

1 个答案: