Question

我正在使用此功能通过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 :
           ...
           }
  ... 
  }

在HTML和template中使用花括号，我可以渲染所有元素，例如prop1或prop2。否则我无法渲染，例如。，prop1of3，因为该函数无法找到（？）它。你能建议一个解决方案来渲染这种JSON对象中元素的属性吗？ jQuery很感激

Answer 1

...您正在使用您已退出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应该等于最后.后面的任何内容。

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

有各种方法可以实现这一目标。

希望这个很清楚。

Answer 2

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

http://jsfiddle.net/g9e6u/

诀窍是将braches的内部与正则表达式匹配，然后使用闭包来决定用什么来代替匹配。在这种情况下，_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);

javascript模板html

2 个答案: