使用 html Mustache.js 模板的 JQuery 包装元素答案

【问题标题】：JQuery wrap element using a html Mustache.js template使用 html Mustache.js 模板的 JQuery 包装元素
【发布时间】：2012-05-16 10:23:46
【问题描述】：

在我的页面上，我有一个可以称为 myobject 的元素。

<div class="outter">
<div class="somethingElse"><a href="#">test</a></div>
{{myobject}}
</div>
</div>

我想在 DOM 中创建上面的代码，并在代码中添加 myobject。

所以上面会变成：

<div class="outter">
<div class="somethingElse"><a href="#">test</a></div>
<img id="myCoolImage" src="myimage.jpg"/>
</div>
</div>

理想情况下，具有“outter”类的图像将包含来自 img 元素的所有样式元素，但这并不像将其插入我的模板那么重要。

【问题讨论】：

问题是如何用大括号替换占位符，或者只是如何在正确的位置附加一个元素，并将样式转移到另一个元素？
@nathanleggatt 你的问题解决了吗？

标签： jquery jquery-templates mustache

【解决方案1】：

您可以使用三重胡须：{{{myobject}}}

然后：

var template = "<div class="outter">
<div class="somethingElse"><a href="#">test</a></div>
{{{myobject}}}
</div>
</div>";

$("body").append(Mustache.render(template, {myobject: "<img id="myCoolImage" src="myimage.jpg"/>"}));

【讨论】：

【解决方案2】：

我会尝试回答这个问题，但不太了解它应该如何工作？

假设它不是模板系统/插件，重点是用一个元素替换花括号，同时移动 CSS，我会这样做：

var img = $("#myCoolImage")[0],
    css = img.style.cssText,
    wrapper = $(".outter"),
    wrapperContent = wrapper[0].innerHTML,
    placeholder = wrapperContent.match(/{{(.*?)}}/gi);

wrapper.html(wrapperContent.replace(placeholder, img.outerHTML)).get(0).style.cssText = css;

这是一个FIDDLE，看看它是如何工作的。

这只会移动内联 CSS 语句，如果您需要移动在外部样式表或样式标记中设置的样式，则必须查看 Javascript 中的 currentStyle / getComputedStyle 函数，但这似乎有点过头了，当你全部真正要做的是将样式应用到一个类，然后将该类添加到outter 元素。

【讨论】：

【解决方案3】：

考虑到您使用的是模板（Mustache.js？），您可以将 myobject 添加到您的脚本中，如下所示：

$(document.body).on('click', 'button', function(){
   var myobject={img: "myimage.jpg"};       
   var output = Mustache.render("<img id="myCoolImage" 
       src={{myobject.img}}/>", myobject);    
});

对于非模板路由，您可以使用 jQuery append() 方法在 DOM 元素的末尾插入内容，如下所示 (HTML)：

<div class="outter">
   <some-elements></>
      ...appended stuff goes after all of "outter"'s child elements..
       ... but before its closing tag
</div>

JS 会是这样的：

$(document.body).on('click', 'button', function(){
   var myobject={img: "myimage.jpg"};       
    $('.outter').append("<img id="myCoolImage" src="'+myobject.img+'"/>");    
});

【讨论】：

【解决方案4】：

查看.before() 和.after()

所以...您的代码将如下所示：

$("myCoolImage").before("<div class='outter'><div class='somethingElse'><a href='#'>test</a></div>");
$("myCoolImage").after("</div></div>");

【讨论】：