Question

I’ve been building a HTML (email/page) composition tool in Ember.js as a way of getting my head round it, I guess it’s a sort of WYSIWYG.

A user adds various objects with different values (link, text etc.), the objects can have different templates and be arranged with jQuery UI which feeds back to the controller. What the user sees on screen is actually spot on and I am currently saving and reloading clean JSON from localstorage as a method of persistence.

What I’d really like to do though, is being able to generate a clean HTML version of what the user is seeing. Either from something written into the front end application or by processing the JSON I export on the server side.

I’d like to keep as much in JS, Ember and Handlebars as possible, and Ideally not re-implement too much of my templates/code in different places.

An example of a ‘row’ in my rendered output is below.

.row-controls is toggled on and off by a global editor toggle.

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

I guess It might seem like an odd thing to be doing, with limited practical application but I’d like to finish it now I’ve started 🙂 Also, I think the principles involved in any answer could probably have different application, I just haven’t thought of it yet

Thanks! And thanks to the other people on here for answering my previous few questions about Ember.

EDIT

Just be clear, I’m talking about getting output like this

<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

In case anyone finds this link – I’ve added (to my standard JS version) a check for attr within the attribute loop.

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

It could have been an error in some other code I had going on, but jQuery was passing ‘undefined’ as attr in the loop. jQuery seems to want to resolve the whole each function so I couldn’t debug exactly what this was. The check seems to be working for me at the moment though.
Not sure how to factor into the particular original coffeescript file I’m afraid.

Answer 1

ghempton from CodeBrief talks a little about it on this awesome post: http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

Check tip 7.
Read all of them too, its worth it.

By the way, it’s on coffeescript the post, if you need to get the JS version go to http://coffeescript.org/ on the Try Coffeescript tab and convert it!