Twitter typeahead.js:可以使用Angular JS作为模板引擎吗？如果不是如何替换Hogan/Moustache js的"{{}}"？

Question

嘿伙计们我正在使用twitter的typeahead.js,我想知道是否有可能修改hogan.js使用其他东西{{}}？

我现在正在查看缩小的代码,我不知道如何改变这么简单的东西.进行查找和替换会破坏它.

我问的主要是因为我使用的是Angular JS,但是twitter的typeahead需要一个模板引擎,导致hogan和angular的{{}}冲突.更好的解决方案是简单地修改Angular JS(我知道它不是模板引擎)并放弃Hogan以符合以下标准:

任何模板引擎都可以使用typeahead.js,只要它符合以下API:

// engine has a compile function that returns a compiled template
var compiledTemplate = ENGINE.compile(template);

// compiled template has a render function that returns the rendered template
// render function expects the context to be first argument passed to it
var html = compiledTemplate.render(context);

Answer 1

忽略这方面的文档,只需查看源代码:

function compileTemplate(template, engine, valueKey) {
    var renderFn, compiledTemplate;
    if (utils.isFunction(template)) {
        renderFn = template;
    } else if (utils.isString(template)) {
        compiledTemplate = engine.compile(template);
        renderFn = utils.bind(compiledTemplate.render, compiledTemplate);
    } else {
        renderFn = function(context) {
            return "<p>" + context[valueKey] + "</p>";
        };
    }
    return renderFn;
}

碰巧你只需要传递一个函数template,可以使用一个context对象来调用,该对象包含你在实例化时在基准对象中传递的数据,所以:

$('#economists').typeahead({
  name: 'economists',
  local: [{
    value: 'mises',
    type: 'austrian economist',
    name: 'Ludwig von Mises'
  }, {
    value: 'keynes',
    type: 'keynesian economist',
    name: 'John Maynard Keynes'
  }],
  template: function (context) {
    return '<div>'+context.name+'<span>'+context.type.toUpperCase()+'</span></div>'
  }
})

Answer 2

如果您想将 Hogan.js 与 Angular 一起使用，您可以通过执行以下操作来更改分隔符：

var text = "my <%example%> template."
Hogan.compile(text, {delimiters: '<% %>'});