javascript 模板 html答案

【问题标题】：javascript template htmljavascript 模板 html
【发布时间】：2013-03-13 21:20:26
【问题描述】：

我正在使用这个函数通过 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 很感激

【问题讨论】：

标签： javascript html json templates

【解决方案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 应该等于最后一个 . 后面的任何内容。

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

有各种各样的方法可以让它发挥作用。

希望这个很清楚。

【讨论】：

是的，这真的很清楚。我想知道所有这些操作是否值得。我想像 mustache.js 这样的东西可以让我的生活更轻松。我真的很怀疑。
这一切都取决于您还需要做多少。我的意思是使用小东西可以让您编写模板，例如：<h1>{ article.title }</h1> 和 data.article.title 将保存您正在寻找的东西。如果您需要开始添加逻辑（if|for|while|etc），那么您的系统将需要大修，或者您需要使用库。但说真的，将 2 行 while 循环转换为一个名为 getData 的函数，或者您想要这样做是一种非常紧凑的方式，可以实现您当前需要的那种模板。如果您的需求发生变化/增长，请学习图书馆。
不需要很复杂。我的答案中的示例简单而强大。对于循环等，可以创建一个辅助函数来帮助模板。

【解决方案2】：

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

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);

【讨论】：