带有嵌套数组的微模板

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'（“加利福尼亚迪斯尼乐园”）来渲染。我知道这将是一个嵌套循环，但我一辈子都无法弄清楚语法。顺便说一句，模板解决方案来自这里：http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/ 谢谢！

编辑::: 我正在寻找能够将位置对象的任何属性放入模板中。因此，例如，如果用户决定他们想要将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

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

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

Answer 2

而不是这个：

    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 3

感谢您的输入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);