javascript - 带有嵌套数组的微模板

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”(“Disneyland California”)以进行渲染。我知道这将是一个嵌套循环，但我终其一生都无法弄清楚语法。顺便说一句，模板解决方案来自这里: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 语句。