我正在尝试将微模板合并到我正在构建的插件中。我已经把一切都做好了,但是当涉及到数据中的嵌套数组时我遇到了问题。非常感谢您的帮助。这是剥离的代码:
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");