0

我正在使用这个函数通过 javascript模板化HTML ：

 parseTemplate = function(tmpl, data) {
   var regexp;

  for (k in data) {
     regexp = new RegExp('{' + k + '}', 'g');
     tmpl = tmpl.replace(regexp, data[k]);
    }
   return tmpl;
   }

像这样的JSON对象

JSONdata = { 
  prop1 : val,
  prop2 : val,
  prop3 : {
           prop1of3 : 
           prop2of3 :
           ...
           }
  ... 
  }

使用花括号 inHTML和 righe template，我可以渲染所有元素，例如prop1or prop2。否则我无法渲染，例如，，prop1of3因为函数无法找到（？）它。您能否建议一种解决方案来呈现这种 JSON 对象中元素的属性？jQuery 很受欢迎

4

2 回答 2

0

...您正在使用从 RegEx 中提取的字符串。

因为你正在使用一个字符串，data["prop1.sub_prop2"]所以如果你真的想得到data.prop1.sub_prop2.

所以要么你需要让你的对象变浅：

data = {
    prop1 : "",
    a_obj_prop_1 : "",
    a_obj_prop_2 : ""
};

...这不会让生活变得更轻松...

...或者您需要从 RegEx 中获取字符串，并检查它.是否存在，如果它们在那里，则将字符串拆分为一个数组，然后遍历该数组，抓住下一个对象。 .

var parts_arr = "obj_a.client.id".split("."),
    key,
    item = data;

while (parts_arr.length > 0) {
    key = parts_arr.shift();
    item = item[key];
}

完成后，item应该等于 last 后面的内容.。

当然，如果.模板中没有，那么你想完全跳过这个。
您也可以递归地编写它。

有各种各样的方法可以让这个工作。

希望这个很清楚。

于 2013-03-13T21:35:01.197 回答
0

这是我个人使用的一个很好的例子。

http://jsfiddle.net/g9e6u/

诀窍是用正则表达式匹配分支的内部，然后使用闭包来决定用什么替换匹配项。在这种情况下，_renderProperty()决定值应该是什么。该函数获取上下文ctx并将匹配的字符串附加name到它。所以匹配hobbies.beach将被评估为ctx.hobbies.beach。eval进行评估并将最终值分配给名为 的变量value。作为奖励，您也可以在大括号内使用 javascript。

function Template(html) {
    this.html = html;

    this.render = function (context) {
        var self = this;
        return this.html.replace(/\{(.+?)\}/g, function (full, group) {
            return self._renderProperty(group, context);
        });
    }

    this._renderProperty = function (name, ctx) {
        var value;
        eval('value = ctx.' + name);
        return value;
    }
};

var context = {
    name:'John Doe',
    age: 200,
    hobbies: {
        beach:'I like walking there',
        flute:'Sounds like an angel',
        deep: {
            sea:'deep sea diving'
        }
    }
};

var t = new Template("My name is {name.replace(/o/, 'X')}, {age} years old. One of my hobbies is the beach because {hobbies.beach}. I also like {hobbies.deep.sea.toUpperCase()}");

var output = t.render(context);
alert(output);
于 2013-03-13T22:36:51.110 回答