0

我一直在使用该$.each函数和一些模板，以便我可以使用存储在数组 中的对象的and属性有效地填充/替换存储在temp变量中的 HTML 字符串。titlethumbnailcontent

因此，例如在$.each正则表达式的回调函数中找到{{title}}，它将替换{{title}}为 的内容obj.title，因此我们基本上将其替换为字符串 'Speak of the devil and he shall present'，这是对象的标题属性被迭代。

我发现的问题是，当我将此 HTML 字符串 ( temp variable) 附加到正文时。我的imgHTML 标记以错误的方式输出，其内容在我的标记obj.title中创建了不需要的属性img

输出的 HTML：

<h2> Speak of the devil and he shall appear </h2>
<img appear="" shall="" he="" and="" devil="" the="" of="" alt="Speak" src="images/bane.jpg">

这是我的模板：

<script id="blogTemplate" type="chris/template">
    <h2> {{title}} </h2>
    <img src={{thumbnail}} alt={{title}}>
</script>

这是我的 jQuery 代码：

(function() {

        var content = [
            {
                title: 'Speak of the devil and he shall appear',   
                thumbnail: 'images/bane.jpg',
            },

            {
                title: 'Me the joker',   
                thumbnail: 'images/Joker.jpg',
            }
        ];

            var template = $.trim( $('#blogTemplate').html() );

        $.each( content, function( index, obj ) {  

            var temp = template.replace( /{{title}}/ig, obj.title )
                               .replace( /{{thumbnail}}/ig, obj.thumbnail );
            console.log(temp);

            $('body').append(temp);
        });

    })();
4

3 回答 3

4

您需要修改模板以在属性周围包含引号。

<script id="blogTemplate" type="chris/template">
    <h2> {{title}} </h2>
    <img src="{{thumbnail}}" alt="{{title}}">
</script>
于 2012-11-30T15:50:10.710 回答
0

我强烈建议你看看 Handlebars：http ://handlebarsjs.com/ 。您几乎在做同样的事情，但有了车把，您可以获得更多的支持。

于 2012-11-30T15:51:52.387 回答
0

你需要在你的正则表达式中转义{and}字符，即

template.replace(/\{\{title\}\}/ig, obj.title)

未转义，{n}将完全n匹配前一个字符的出现。查看MDN 上的 Regex 指南以获取更多信息。

于 2012-11-30T15:53:38.643 回答