Question

我一直在Ember.js中构建一个HTML（电子邮件/页面）合成工具，以此来理解它，我想这是一种所见即所得。

用户添加具有不同值的各种对象（链接，文本等），对象可以具有不同的模板，并使用jQuery UI进行排列，该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在循环中将'undefined'作为attr传递。 jQuery似乎想要解决整个每个函数，所以我无法完全调试它是什么。此刻支票似乎对我有用。不知道如何考虑到我害怕的特定原始coffeescript文件。

Answer 1

来自CodeBrief的ghempton在这篇很棒的帖子上谈了一点：http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

检查提示7。阅读所有这些，值得。

顺便说一句，如果您需要将JS版本转到Try Coffeescript选项卡上的http://coffeescript.org/并转换它，那么它就是coffeescript的帖子！

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

1 个答案: