Twitter typeahead.js：Angular JSをテンプレートエンジンとして使用できますか？ Hogan/Mustache jsの "{{}}"をどうやって置き換えるのですか？

Question

私はtwitter's typeahead.jsと一緒に働いています。hogan.jsに{{}}以外のものを使用するように修正することが可能かどうか疑問に思っていましたか？

私は現在minified codeを見ています。私は何か簡単に何かを変えるべきなんて考えていません。検索と置換を実行すると、それが破損します。

私はAngular JSを使用しているため主に質問していますが、twitterの先読みにはテンプレートエンジンが必要なため、hoganとangularの{{}}が衝突します。もっと良い解決策は、Angular JS（テンプレートエンジンではないことはわかっています）とHoganを次の基準に合わせて修正することです：

次のAPIに準拠している限り、テンプレートエンジンはtypeahead.jsで動作します。 ：

// 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

あなたは角度でHogan.jsを使用したい場合は、あなたのような何かをすることによって、区切り文字を変更することができます。

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

Answer 2

だけ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; 
} 

あなたがちょうどそう、あなたがインスタンス化の時点で基準オブジェクトに渡されたデータが含まれていcontextオブジェクトで呼び出し可能な、templateに関数を渡すことができ起こる：

$('#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 3

それが表示されますtypeahead.jsが期待するテンプレートエンジンの結果は、html文字列であり、DOM要素ではありません（dropdown_view.js内）。だから私は角度テンプレートを使用するための良い解決策があるかどうかはわかりません。テストとして、結果を角型テンプレートにバインドすることができましたが、要素にレンダリングしてから、データとバインドした後に要素からhtml値を取得する必要がありました。私はこのアプローチが好きではありませんが、誰かが役に立っているかもしれないと思いました。私は前の記事のようにテンプレート関数を使うつもりだと思う。

ジェイドテンプレートあなたは角度で波括弧を変更したい場合は、単にこれだけ続くことができる

.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', ''); 
     }); 
     } 
    }; 
    } 
]);