Question

我正在尝试将微模板合并到我正在构建的插件中。我已经把所有东西都搞定了，但是当涉及到数据中的嵌套数组时，我遇到了问题。非常感谢您的帮助。这是剥离的代码：

var locations = [{
            "name": "Disneyland California",
            "address": "1313 North Harbor Boulevard"
        },
        {
            "name": "Walt Disney World Resort",
            "address": "1503 Live Oak Ln"
        }],

        tmplData = [{
                    location: locations[0],
                    foo: "bar"
                }],

        template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
        attachTemplateToData;

        attachTemplateToData = function(template, data) {
            var i = 0,
                len = data.length,
                fragment = '';
            function replace(obj) {
                var t, key, reg;
                for (key in obj) {
                    reg = new RegExp('{{' + key + '}}', 'ig');
                    t = (t || template).replace(reg, obj[key]);
                }       
                return t;
            }
            for (; i < data.length; i++) {
                fragment += replace(data[i]);
            }   
            console.log(fragment);
        };  
        attachTemplateToData(template, tmplData);

日志：

bar,{{location.name}}

正如你在console.log中看到的那样'foo'出来就好了，但我也需要让'location.name'（“迪士尼乐园加州”）也能渲染。我知道它将是一个嵌套循环，但我不能为我的生活弄清楚语法。 BTW，模板解决方案来自这里：http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/ 谢谢！

EDIT ::: 我希望使location对象的任何属性能够放入模板中。因此，例如，如果用户决定将locations.city或locations.foo添加到数组中，那么在模板中，他们只需要{{location.city}}或{{location.foo}}。我已经能够通过使用jQuery的tmpl插件实现这一目标，但我不需要提供所有内容。我想要一个像我一样非常剥离的版本，只处理上述实例。以下是我对tmpl插件所做的事情（有效）：

tmplData = [{
                    locations: settings.locations[i]
                }];

            var tmplMarkup = "Shipping From:<br><b>${locations.name}, ${locations.city}, ${locations.state}</b>";
            $.template("deTemplate", tmplMarkup);
            $.tmpl("deTemplate", tmplData).appendTo("#deResults");

Answer 1

而不是：

    var locations = [{
        "name": "Disneyland California",
        "address": "1313 North Harbor Boulevard"
    },
    {
        "name": "Walt Disney World Resort",
        "address": "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0],
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
    attachTemplateToData;

试试这个：

    var locations = [{
        name: "Disneyland California",
        address: "1313 North Harbor Boulevard"
    },
    {
        name: "Walt Disney World Resort",
        address: "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0].name,
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location}}, {{foo}}",
    attachTemplateToData;

真的只是.name需要大约4行！：）

Answer 2

您需要更改模板识别，以便不仅匹配匹配代码中的{{prop}}，还会{{prop.something}}

您可以使用新的正则表达式添加另一个if语句。

Answer 3

感谢您输入 vittore ，我终于找到了代码。这是我需要的额外的if语句和regEx，我也发现我也需要.hasOwnProperty函数：

for(subKey in obj[key]){
                        if (obj[key].hasOwnProperty(subKey)) {
                            reg = new RegExp('{{'+key+'.'+subKey+'}}');
                            t = (t || template).replace(reg, obj[key][subKey]);
                        }
                    }

以下是完成的代码：

var locations = [{
        "name": "Disneyland California",
        "address": "1313 North Harbor Boulevard"
    },
    {
        "name": "Walt Disney World Resort",
        "address": "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[1],
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location.address}}, {{foo}}",
    attachTemplateToData;

    attachTemplateToData = function(template, data) {
        var i = 0,
            j = 0,
            len = data.length,
            fragment = '';
        function replace(obj) {
            var t, key, subKey, subSubKey, reg;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    reg = new RegExp('{{' + key + '}}', 'ig');
                    t = (t || template).replace(reg, obj[key]);
                    for(subKey in obj[key]){
                        if (obj[key].hasOwnProperty(subKey)) {
                            reg = new RegExp('{{' + key + '.' + subKey + '}}','ig');
                            t = (t || template).replace(reg, obj[key][subKey]);
                        }
                    }
                }
            }       
            return t;
        }
        for (; i < data.length; i++) {
            fragment += replace(data[i]);
        }   
        console.log(fragment);
    };  
    attachTemplateToData(template, tmplData);

具有嵌套数组的微模板

3 个答案: