Rendering dynamicznie generowanych linków {{link-to}} w wyrażeniu szablonu paska kierownicy Ember.js

Question

Mam szablon Ember, który renderuje tekst za pomocą wyrażenia Kierownica, tj. {{caption}}. W renderowanym tekście znajdują się hashtagi, z których każdy muszę klikać i przechodzić do określonej trasy w aplikacji Ember.

Utworzyłem pomocnika do parsowania tekstu i zastąpienia każdego hashtaga odnośnikiem do wymaganej trasy w połączeniu z hashtagiem, więc teraz wyrażenie na Kierownicy wygląda tak: {{clickable-hashtags caption}}. Jednak helper tworzy łącza za pomocą zwykłych znaczników HTML <a href>, a to jest zwracane przy użyciu Ember.Handlebars.SafeString.

Chciałbym zamiast tego użyć metody pomocnika Ember dla {{#link-to}} dla każdego hashtagu, ale nie mogę wymyślić, jak to zrobić. Czy jest możliwe, aby Handlebars analizował znaczniki link-to w wyrażeniu {{caption}} szablonu?

Answer 1

Cóż, można zrobić to z własności komputerowej

Podpis:

To jest moje #hashta g podpis

W sterowniku:

computedCaption: function() { 
    var words = caption.split(" "); 
    return words.map(function (e) { 
     var isHashtag = e.charAt(0) === "#"; 
     return {isHashtag: isHashtag, text: e}; 
    }); 
    }.property("computedCaption") 

Szablon:

{{#each computedCaption as |cap|}} 
    {{#if cap.isHashtag}} 
     {{#link-to 'tags' cap.text}}{{cap.text}}{{/link-to}} 
    {{else}} 
    {{cap.text}} 
    {{/if}} 
{{/each}} 

Wynik

To mój #hashtag podpis

JS Bin: http://emberjs.jsbin.com/kohubu/1/

Computed properties @ Emberjs

Answer 2

Problem, który widzę w tym sposobie, nie jest w stanie powiązać zmiennych (i wyników pomocniczych) z pomocnikiem łącza. Praca, której używam, polega na użyciu akcji i przeniesieniu logiki pomocniczej do kontrolera.

Zdefiniuj akcję transitionTo w trasie aplikacji:

App.ApplicationRoute = Ember.Route.extend({ 
    events: { 
     transitionTo: function (route) { 
      this.transitionTo(route); 
     } 
    } 
}); 

Szablon:

{{#each item in controller.captions}} <!-- or instead use model--> 
    <li> 
     <a {{action 'transitionTo' item.route}}> <!-- without hashtags --> 
      {{item.label}} <!-- with hashtags --> 
     </a> 
    </li> 
{{/each}} 

Answer 3

Czy uważane robi client-side HTML compilation?

Myślę, że będziesz potrzebował zainstalować niezbędnych pomocników (tj. link-to) i przekazać wartości zmiennych. Ta test może być pomocna w uzyskaniu tego.