Twitter typeahead.js: Można użyć Angular JS jako silnika szablonów? Jeśli nie, to jak zastąpić "{{}}" dla Hogan/Mustache js?

Question

Cześć, pracuję z twitter's typeahead.js i zastanawiałem się, czy można zmodyfikować hogan.js, aby użyć czegoś innego niż {{}}?

Teraz patrzę na minified code i nie mam pojęcia, co zmienić w przypadku czegoś tak prostego. Znalezienie i zastąpienie go zrywa.

Pytam o to głównie dlatego, że używam Angular JS, ale typ Twittera wymaga silnika szablonowego, powodując konflikt hogana i kątowego {{}}. Jeszcze lepszym rozwiązaniem byłoby po prostu zmodyfikowanie Angular JS (wiem, że to nie jest szablonowy silnik) i porzucenie Hogana, aby pasował do następujących kryteriów:

Dowolny silnik szablonów będzie działał z typeahead.js, o ile będzie zgodny z następującym 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

Jeśli chcesz korzystać z Hogan.js kątowe można zmienić ograniczniki robiąc coś takiego:

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

Answer 2

Ignoruj ​​dokumentację na ten temat, wystarczy spojrzeć na 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; 
} 

Zdarza się, można po prostu przekazać funkcję template, na żądanie z context obiektu, który zawiera dane, które przeszły w obiektach bazowych w momencie konkretyzacji, więc:

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

Wydaje się, że wynik silnika szablonów oczekiwany przez typeahead.js jest łańcuchem html, a nie elementem dom (w dropdown_view.js). Tak więc nie jestem pewien, czy istnieje dobre rozwiązanie do używania kątowego szablonu. Jako test udało mi się przekonać go do powiązania wyniku z szablonem kątowym, ale musi on być renderowany do elementu, a następnie pobrać wartość html z elementu po powiązaniu z danymi. Nie podoba mi się to podejście, ale pomyślałem, że ktoś może mu się przydać. Myślę, że pójdę z funkcją szablonu, jak w poprzednim poście.

Jade szablon wygląda

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

dyrektywa

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