sauber HTML von Emberjs Lenker Anwendung

Question

Ich habe ein HTML (E-Mail/Seite) Kompositions-Tool in Ember.js als eine Möglichkeit, meinen Kopf herum, ich denke, es ist eine Art WYSIWYG.

Ein Benutzer fügt verschiedene Objekte mit unterschiedlichen Werten hinzu (Link, Text usw.), die Objekte können verschiedene Vorlagen haben und mit jQuery UI arrangiert werden, die zum Controller zurückfedert. Was der Benutzer auf dem Bildschirm sieht, ist genau richtig und ich speichere und lade gerade sauberes JSON aus dem lokalen Speicher als eine Methode der Persistenz.

Was ich wirklich gerne tun würde, ist in der Lage, eine saubere HTML-Version von dem zu erzeugen, was der Benutzer sieht. Entweder von etwas, das in die Front-End-Anwendung geschrieben wurde, oder durch die Verarbeitung des JSON-I-Exports auf der Serverseite.

Ich möchte so viel wie möglich in JS, Ember und Lenker halten und idealerweise nicht zu viele meiner Vorlagen/Code an verschiedenen Orten neu implementieren.

Ein Beispiel für eine 'Zeile' in meiner gerenderten Ausgabe ist unten.

.row-controls wird durch einen globalen Editor-Schalter ein- und ausgeschaltet.

<script id="metamorph-11-start" type="text/x-placeholder"></script> 
    <div id="ember507" class="ember-view template-row ui-droppable"> 
    <ul id="ember524" class="ember-view row-controls"> 
     <li class="dragger"><a href="#">drag</a></li> 
     <li class="type"><a href="#" data-ember-action="19">type</a></li> 
     <li class="edit"><a href="#" data-ember-action="20">edit</a></li> 
     <li class="delete"><a href="#" data-ember-action="21">delete</a></li> 
    </ul> 
    <script id="metamorph-12-start" type="text/x-placeholder"></script> 
    <script id="metamorph-13-start" type="text/x-placeholder"></script> 
     <h2><a href="http://foo.com/bar" data-bindattr-34="34"> 
     <script id="metamorph-19-start" type="text/x-placeholder"></script> 
      Link title text 
     <script id="metamorph-19-end" type="text/x-placeholder"></script> 
     </a></h2> 
     <img src="http://foo.com/image.png" data-bindattr-35="35"> 
     <script id="metamorph-20-start" type="text/x-placeholder"></script> 
     Teaser/synopsis 
     <script id="metamorph-20-end" type="text/x-placeholder"></script> 
     <a href="http://foo.com/bar" data-bindattr-36="36">Read more</a> 
    <script id="metamorph-13-end" type="text/x-placeholder"></script> 
    <script id="metamorph-12-end" type="text/x-placeholder"></script> 
    </div> 
<script id="metamorph-11-end" type="text/x-placeholder"></script> 

Ich denke, es könnte scheinen, wie eine seltsame Sache mit begrenzten praktischer Anwendung zu tun, werden, aber ich mag es jetzt fertig Ich habe angefangen :) Außerdem glaube ich, die in jeder Antwort beteiligten Prinzipien könnten wahrscheinlich haben unterschiedliche Anwendung, ich habe nur noch nicht daran gedacht

Vielen Dank! Und danke an die anderen Leute hier, die meine letzten Fragen zu Ember beantwortet haben.

EDIT

einfach klar sein, ich rede wie dieses

<h2><a href="http://foo.com/bar">Link title text</a></h2> 
<img src="http://foo.com/image.png"> 
Teaser/synopsis 
<a href="http://foo.com/bar">Read more</a> 

SOLUTION EDIT

Falls sich jemand findet diesen Link bekommen Ausgabe - ich habe hinzugefügt (zu meiner Standard-JS-Version) eine Überprüfung auf Attr innerhalb der Attributschleife.

<script> 
// ... 
return $.each($this[0].attributes, function(index, attr) { 
    // this bit added 
    if(!attr) { 
    return; 
    } 
    if (attr.name.indexOf('data-bindattr') === -1) { 
    return; 
    } 
    // ... 
</script> 

Es könnte ein Fehler in einem anderen Code, die ich auf hatte zu gehen, aber jQuery vorging als attr in der Schleife ‚undefined‘. jQuery scheint das Ganze jeder Funktion auflösen zu wollen, damit ich nicht genau debuggen konnte, was das war. Der Scheck scheint im Moment für mich zu funktionieren. Nicht sicher, wie man in die bestimmte ursprüngliche coffeescript Datei einmischt, fürchte ich.

Answer 1

ghempton von CodeBrief spricht ein wenig über sie auf diesem fantastischen Beitrag: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

prüfen Spitze 7. auch alle von ihnen lesen, seine es wert.

Übrigens ist es auf coffeescript der Beitrag, wenn Sie die JS-Version gehen müssen, gehen Sie zu http://coffeescript.org/ auf der Registerkarte Try Coffeescript und konvertieren Sie es!