Question

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

例如，在$.each的回调函数中，正则表达式找到{{title}}，它将用{{title}}的内容替换obj.title，这样我们基本上可以替换它带有字符串'Speak of the devil，他将出现'，这是迭代的对象的title属性。

我发现的问题是，当我将这个HTML字符串（temp variable）附加到正文时。我的img HTML代码以错误的方式输出，而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);
        });

    })();

Answer 1

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

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

Answer 2

我强烈建议你去看看Handlebars：http://handlebarsjs.com/。你几乎都在做同样的事情，但是使用把手你会有更多的支持。

Answer 3

您需要转义正则表达式中的{和}字符，即

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

未转义，{n}将完全匹配前一个字符的n次出现。查看Regex guide on MDN了解详情。

使用$ .each迭代一个对象数组 - 正则表达式的问题

3 个答案: