从 emberjs 车把应用程序中获取干净的 HTML
get clean HTML from emberjs handlebars application
我一直在Ember中构建一个HTML(电子邮件/页面)合成工具.js作为一种让我了解它的方式,我想这是一种所见即所得。
用户添加具有不同值(链接,文本等)的各种对象,这些对象可以具有不同的模板,并使用jQuery UI进行排列,该UI反馈给控制器。用户在屏幕上看到的内容实际上是正确的,我目前正在从本地存储保存和重新加载干净的 JSON 作为一种持久性方法。
不过,我真正想做的是能够生成用户所看到的干净的HTML版本。无论是从写入前端应用程序的内容,还是通过处理我在服务器端导出的 JSON。
我想尽可能多地保留在 JS、Ember 和 Handlebars 中,理想情况下不要在不同的地方重新实现太多的模板/代码。
下面是我渲染输出中的"行"示例。
.row 控件由全局编辑器切换开关打开和关闭。
<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似乎想要解决整个每个函数,所以我无法确切地调试这是什么。不过,支票目前似乎对我有用。恐怕不知道如何考虑特定的原始咖啡脚本文件。
CodeBrief的ghempton在这篇很棒的帖子中谈到了它:http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/
检查提示 7.也阅读所有这些,值得。
顺便说一下,它在 coffeescript 帖子上,如果您需要获取 JS 版本,请转到 http://coffeescript.org/在"尝试咖啡脚本"选项卡上进行转换!
- 无法将数据从firebase获取到我的html页面
- Brightcove获取/显示HTML中的当前视频标题和描述
- 获取HTML属性中CSS声明的值
- 这是使用html快照和谷歌获取的预期结果吗?SEO/SPA
- Html获取Rgb中的颜色
- 使用 jQuery 从 HTML 获取 id,给出意想不到的结果
- html获取调用onsubmit的位置
- 使用 HTML 获取已提交表单之外的选中元素
- 如何从 HTML 获取输入以链接到 MyChecker 函数?它不起作用
- 我如何从javascript到PHP或HTML获取变量
- 在ajax响应中从html获取输入值
- HTML获取URL参数
- ng-bind-html获取html内容的第一个字母
- 从HTML获取标题
- 从Html获取信息
- 使用Javascript和HTML获取选定的选项,并根据值显示字符串
- 通过AJAX和PHP通过输入HTML获取和读取文件
- 如何使用javascript生成的html获取标签的ID
- 在页面刷新(php)上从html获取表单数据
- JS Regexp:从 html 获取内联 JavaScript