javascript模板html

我正在使用此函数通过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

中的大括号和righe

模板

，我能够渲染所有元素，如

prop1

或

prop2

。否则我无法渲染，例如，

prop1of3

，因为函数无法找到它。您能推荐一种解决方案来同时呈现这种JSON对象中元素的属性吗？

---

jQuery非常有用

…您正在使用从正则表达式中提取的字符串

因为您使用的是字符串，

data[“prop1.sub_prop2”]

不起作用，如果您实际尝试获取

data.prop1.sub_prop2

因此，您需要使对象变浅：

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

…这不会让生活更轻松

…或者您需要获取从正则表达式中获得的字符串，并检查它是否存在

，如果它们存在，则将字符串拆分为一个数组，然后在该数组中循环，向下抓取下一个对象

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

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

完成后，

项

应等于最后一个

后面的内容

当然，如果模板中没有

，则您希望完全跳过此操作。
您也可以递归地编写它

有各种各样的方法可以让它工作

---

希望这一点非常清楚。

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

诀窍是用正则表达式匹配分支的内部，然后使用闭包来决定用什么替换匹配。在这种情况下，

\u renderProperty（）

决定值应该是什么。该函数获取上下文

ctx

，并将匹配的字符串

name

附加到该上下文中。因此，匹配的

cabiods.beach

将被评估为

ctx.cabiods.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);

---

是的，非常清楚。我想知道这些操纵是否值得。我想像mustache.js这样的东西可以让我的生活更轻松。我真的很怀疑。这一切都归结于你需要做多少。我的意思是使用一些很小的东西来编写模板，比如：

{article.title}

和

数据。article.title

将保存您要查找的内容。如果您需要开始添加逻辑（If | for | while |等），那么您的系统将需要大修，或者您需要使用库。但说真的，将2行while循环转换为一个名为

getData

的函数，或者按照您希望的方式，这是一种非常紧凑的方法，可以实现您当前需要的模板化。如果你需要改变/成长，学习一个图书馆。它不需要很复杂。我的答案中的样本是简单而有力的。对于循环等，可以创建一个助手函数来帮助模板化。