javascript - js使用json渲染很多html

Question

我调用我的 api 并返回 json 对象，然后它会生成很多充满内容的 div。但我一直使用连接来插入我的对象属性。有更好的方法吗？

$.each(JSON, function(key, value) { 
  var content = display_mention(value);
  $("#mentions_container").append(content);
    });

    function display_mention(mention) {
       //this str will be much more complex and use lots of concatenation
   var str = "<div data-id='" + mention.id +"'> " + mention.texto + "</div></br>";
   return str;
    }

Answer 1

有一种更好的方法，它被称为客户端模板。

查看 mustache.js https://github.com/janl/mustache.js 或 handlebars.js http://handlebarsjs.com/

Answer 2

我喜欢用这个人作为微模板引擎：

String.prototype.tpl = function(o) {
    return this.replace(/{([^{}]*)}/g,
        function(a, b) {
            var r = o[b];
            if (!o[b]) return "";
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

var data = {
  title: 'C pocket reference',
  type: 'PDF Document',
  tag: 'programming',
  created_at: '5.31.2010'
}

var html = '<tr><td>{title2}</td><td>{type}</td><td><a href="tags/{tag}">{tag}</a></td><td>{created_at}</td></tr>'.tpl(data);

这很简单，但它会让你的代码更干净。

但是您应该明确地查看更严肃的解决方案，例如：jQuery 模板（您使用 jQuery）或从这里选择其他一些http://microjs.com/#templating

Answer 3

如果您不需要更大的引擎，您可以编写一个简单的模板函数。

function template(str, context) {
    return str.replace(/\{([a-z]+)\}/g, function(match, key) {
        return context[key];
    });
}

您只需使用这样的对象上下文调用它：

template("<div data-id='{id}'> {texto}</div></br>", mention);