从emberjs handlebars应用程序中获取干净的HTML

Question

我一直在Ember.js中构建一个HTML（电子邮件/页面）组合工具，以此来让我的头部围绕它，我想这是一种所见即所得的方式。

用户添加具有不同值（链接，文本等）的各种对象，对象可以有不同的模板，并与jQuery UI反馈给控制器。用户在屏幕上看到的内容实际上是现货，我目前正在从localstorage保存并重新加载干净的JSON作为持久性的一种方法。

我真的很想做的事情是，能够生成一个干净的HTML版本的用户正在看到的东西。无论是从写入前端应用程序的东西还是通过处理在服务器端导出的JSON。

我希望尽可能多地保留JS，Ember和Handlebars，理想情况下不要在不同的地方重新实现太多的模板/代码。

我的渲​​染输出中的'行'的例子如下。

.row-controls通过全局编辑器切换打开和关闭。

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

我猜它可能看起来像一个奇怪的事情在做，用有限的实际应用，但我想完成它，现在我已经开始:)另外，我觉得参与任何答案的原则可可能有不同的应用，我只是还没有想到它

谢谢！并感谢在座的其他人回答我之前关于Ember的几个问题。

编辑

说清楚，我说的是获得输出这样

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

解决方案编辑

万一有人发现这个链接 - 我已经添加（到我的标准JS版本）在属性循环中检查attr。

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

它可能是在我去上一些其他的代码错误，但jQuery的路过“未定义”与attr中循环。 jQuery似乎想要解决整个每个功能，所以我无法调试到底是什么。虽然此时支票似乎正在为我工​​作。 不知道如何考虑到特定的原始咖啡文件恐怕。从CodeBrief

Answer 1

ghempton谈一点关于它的这个真棒职位：http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

检查尖端7 阅读所有的人也一样，它是值得的。

顺便说一句，这是对的CoffeeScript后，如果您需要获得JS版本去http://coffeescript.org/在尝试CoffeeScript的选项卡并将其转换！