Javascript 嵌套阵列微模板

我正在尝试将一个微模板合并到我正在构建的插件中。我已经得到了所有好的东西，但是当涉及到数据中的嵌套数组时，我遇到了问题。事先非常感谢您的帮助。以下是代码：

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);

正如您在console.log中看到的，“foo”显示得很好，但我还需要获得“location.name”（“加州迪斯尼乐园”）来渲染。我知道这将是一个嵌套循环，但我一辈子都搞不懂语法。顺便说一句，模板解决方案来自这里： 谢谢

编辑：：： 我希望能够将locations对象的任何属性放入模板中。例如，如果用户决定将locations.city或locations.foo添加到数组中，那么在模板中，他们只需转到{{location.city}或{{location.foo}。 我已经能够通过使用jQuery的tmpl插件来实现这一点，但我并不需要它提供的所有功能。我想要一个非常精简的版本，像我一样，只处理上述情况。以下是我对tmpl插件所做的操作（它可以正常工作）：

tmplData=[{
位置：设置。位置[i]
}];
var tmplMarkup=“发货地点：
${locations.name}，${locations.city}，${locations.state}”；
$.template（“deTemplate”，tmplMarkup）；
$.tmpl（“deTemplate”，tmplData）.appendTo（“#deResults”）；

而不是这个：

    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位置=[{
“名称”：“加利福尼亚迪斯尼乐园”，
“地址”：“北港大道1313号”
},
{
“名称”：“沃尔特迪斯尼世界度假村”，
“地址”：“1503 Live Oak Ln”
}],
tmplData=[{
位置：位置[0]，
傅：“酒吧”
}],
template=“发货地点：
{{location.name}，{{{foo}}”，
附件模板数据；

试试这个：

    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;

var位置=[{
名称：“加州迪斯尼乐园”，
地址：“北港大道1313号”
},
{
名称：“沃尔特迪斯尼世界度假村”，
地址：“1503 Live Oak Ln”
}],
tmplData=[{
位置：位置[0]。名称，
傅：“酒吧”
}],
template=“发货地点：
{{location}，{{{foo}}”，
附件模板数据；

---

实际上，它只是一个。名称需要大约4行：）

您需要更改模板识别，以便不仅匹配匹配代码中的

{{prop}

，而且匹配

{{prop.something}

您可以使用新的regexp添加另一个

if

语句来执行此操作。

谢谢您的输入vittore，我终于找到了代码。这是我需要的额外if语句和正则表达式，我还发现其中也需要.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);

var位置=[{
“名称”：“加利福尼亚迪斯尼乐园”，
“地址”：“北港大道1313号”
},
{
“名称”：“沃尔特迪斯尼世界度假村”，
“地址”：“1503 Live Oak Ln”
}],
tmplData=[{
地点：地点[1]，
傅：“酒吧”
}],
template=“发货地点：
{{location.address}，{{{foo}}”，
附件模板数据；
attachTemplateToData=函数（模板、数据）{
var i=0，
j=0，
len=data.length，
片段=''；
功能替换（obj）{
变量t，键，子键，子键，注册表；
用于（输入obj）{
if（对象hasOwnProperty（键））{
reg=新的正则表达式（'{{'+key+'}}'，'ig'）；
t=（t | |模板）。替换（reg，obj[key]）；
for（obj中的子键[键]）{
if（obj[key].hasOwnProperty（子键））{
reg=新的正则表达式（'{{'+key+'.+subKey+'}}'，'ig'）；
t=（t | |模板）。替换（reg，obj[key][subKey]）；
}
}
}
}       
返回t；
}
对于（；i

这样做会使模板背后的想法变得松散，因为您需要像这样硬编码每个嵌套属性。您是对的。重新阅读问题和原始示例后，答案要简单得多。我已经相应地调整了我的答案。谢谢Tims，我已经想到我可以做到这一点，我想我没有在问题中指定我真的希望“用户”不仅能够向locations对象添加自定义属性，而且能够使用template函数调用它们。例如，假设有人想在这两个位置都添加一个“城市”。我想让他们在模板中指定{{locations.city}}，在我不知道他们添加了什么属性的情况下，它就可以工作了。ie:{{locations.foo}}我将相应地编辑我的问题。另外，仅供参考：我最初的想法是使用JQuerysTMPL插件，它完全按照我想要的方式工作。我希望删除这个依赖项，因为不仅用户必须记住包含额外的脚本，而且tmpl插件还有很多我不考虑使用的东西。再次感谢！tmplData=[{位置：位置[i]，}]；var tmplMarkup=“发货地点：${locations.name}，${locations.city}”；$。模板（“deTemplate”，tmplMarkup）；$。tmpl（“解除模板”，tmplData）。附于（“#解除结果”）；这正是我想要的，除了，我真的不知道该怎么做。如果你能举个例子，我将不胜感激。我将根据你的解释继续努力。谢谢

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);