gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 06:42:21 25 4
gpt4 key购买 nike

我一直在 Ember.js 中构建一个 HTML(电子邮件/页面)组合工具,作为让我头脑清醒的一种方式,我想这是一种所见即所得。

用户添加具有不同值(链接、文本等)的各种对象,这些对象可以有不同的模板,并使用反馈给 Controller 的 jQuery UI 进行排列。用户在屏幕上看到的内容实际上是正确的,我目前正在从本地存储中保存并重新加载干净的 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 文件。

最佳答案

CodeBrief 的 ghempton 在这篇精彩的帖子中对此进行了一些讨论:http://codebrief.com/2012/03/eight-ember-dot-js-gotchas-with-workarounds/

检查提示 7。也阅读所有这些内容,这是值得的。

顺便说一句,它在 coffeescript 帖子上,如果你需要获取 JS 版本,请转到 http://coffeescript.org/在尝试 Coffeescript 选项卡上并转换它!

关于javascript - 从 emberjs handlebars 应用程序获取干净的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10103150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com