使用html Mustache.js模板的JQuery wrap元素

时间:2012-05-07 22:36:39

标签: jquery jquery-templates mustache

在我的页面上,我有一个可以称为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元素中的所有样式元素,但这并不像将其插入到我的模板中那么重要。

4 个答案:

答案 0 :(得分:1)

考虑到您使用的是模板(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+'"/>");    
});

答案 1 :(得分:0)

结帐.before().after()

所以...你的代码看起来像这样:

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

答案 2 :(得分:0)

我会尝试回答这个问题,不知道这应该如何运作?

假设它不是模板系统/插件,并且重点是用一个元素替换卷曲块,同时移动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 :(得分:0)

您可以使用三重胡子: {{{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"/>"}));