Question

嘿伙计们我正在使用twitter's typeahead.js，我想知道是否可以修改hogan.js以使用{{}}以外的其他内容？

我现在正在看minified code，我不知道如何改变这么简单的事情。进行查找和替换会破坏它。

我问这个主要是因为我使用的是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

忽略此文档，只需查看source code：

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: '<% %>'});

Answer 3

看来，typeahead.js期望的模板引擎结果是一个html字符串，而不是dom元素（在dropdown_view.js中）。所以我不确定使用角度模板有一个很好的解决方案。作为测试，我能够将结果绑定到角度模板，但它必须渲染到元素，然后在绑定数据后从元素中获取html值。我不喜欢这种方法，但我认为有人可能会发现它很有用。我想我会使用上一篇文章中的模板函数。

Jade模板看起来像

.result
  p {{datum.tokens}}
  p {{datum.value}}

指令

angular.module('app').directive('typeahead', [
  '$rootScope', '$compile', '$templateCache',
  function ($rootScope, $compile, $templateCache) {
    // get template from cache or you can load it from the server
    var template = $templateCache.get('templates/app/typeahead.html');
    var compileFn = $compile(template);
    var templateFn = function (datum) {
      var newScope = $rootScope.$new();
      newScope.datum = datum;
      var element = compileFn(newScope);
      newScope.$apply();
      var html = element.html();
      newScope.$destroy();
      return html;
    };
    return {
      restrict: 'A',
      link: function (scope, element, attrs, ctrl) {
        element.typeahead({
          name: 'server',
          remote: '/api/search?q=%QUERY',
          template: templateFn
        });
        element.on('$destroy', function () {
          element.typeahead('destroy');
        });
        element.on('typeahead:selected', function () {
          element.typeahead('setQuery', '');
        });
      }
    };
  }
]);

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

3 个答案: