js使用json渲染大量的html

-1

我打電話給我的api並返回json對象，然後它產生了很多充滿內容的div。但我一直使用串聯來插入我的對象屬性。有沒有更好的方法呢？js使用json渲染大量的html

$.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; 
    }

來源

2012-10-24 Rodrigo Dias

如果你做你自己的串接HTML字符串，最後一次追加它（即沒有一個模板引擎）是渲染速度最有效的解決方案。但是，如果您生成大量的html，則可以使用jQuery模板，灰塵，鬍子或類似的東西。 –

有一個更好的方法，它被稱爲客戶端模板。

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

來源

2012-10-24 11:04:37

嗡嗡聲鬍鬚是令人敬畏的！你甚至可以把html放到一個單獨的文件中。 –

我喜歡用這傢伙的微模板引擎：

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

這很簡單，但它會使你的代碼更加清晰。

但你應該definetely看像更嚴重的解決方案：jQuery templates（正弦你使用jQuery），或從這裏http://microjs.com/#templating

來源

2012-10-24 11:05:13 dfsq

當你需要簡單的插值時，yeah肯定會有很大的幫助... mustach也可以幫助你。 –

選擇一些其他的你可以寫一個簡單的模板功能，如果你並不需要一個更大的引擎。

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

來源

2012-10-24 11:13:19

是的，如果它有助於提高性能，我會交易這種方法，因爲客戶端是移動的。 –

我們在手機上成功使用了[dust.js]（http://akdubya.github.com/dustjs/）。但是，如果你不需要條件和循環等所有功能，也許可以查看[下劃線模板]（http://underscorejs.org/#template）以獲得一些更強大的想法。 –

js使用json渲染大量的html

回答

相關問題