尋找更好的方式設置使用AJAX檢索的JSON對象數據的樣式

Question

我在網站上使用AJAX來獲取由PHP腳本生成的JSON字符串。 JSON對象類似於：

{
  "people" : [
    { "name" : "Bob", "id" : "1", "sex" : "m" }, 
    { "name" : "Amy", "id" : "2", "sex" : "f" }
  ]
}

使用AJAX檢索它后，我將使用Javascript手動對其進行樣式設置

for(i = 0; i < obj.people.length; i++) {
  document.getElementById('people-container').innerHtml += '<span class=\'' + obj.people[i].sex + ' person\'>' + obj.people[i].name + '</span>
}

但我不禁對將HTML和類嵌入Javascript感到內，因為我將Smarty模板引擎用於所有其他非AJAX內容。

我想我不能對我的AJAX響應使用Smarty，因為模板引擎是在頁面加載時運行的，而AJAX調用是在頁面加載后完成的……我有更好的方法嗎？

Answer 1

如果放置一些示例代碼，這將很有用。 但是，如果我對您的理解正確，則可以使用AJAX調用返回如下內容：

{
  "html": "<span>...${sex}.. ${name}</span>",
  "people" : [
    { "name" : "Bob", "id" : "1", "sex" : "m" }, 
    { "name" : "Amy", "id" : "2", "sex" : "f" }
  ]
}

然后，您可以使用JS將標記添加到頁面上，以添加所需的任何模板引擎。 顯然，您也可以遍歷返回的數據，這將利用模板。

// Don't append more than once if multiple ajax calls
if ( !document.getElementById( 'people-template' ).length ) {

  // Append template to page
  var script = document.createElement('script');
  script.type = 'text/html';
  script.id = "people-template";
  document.body.appendChild( script );

}

for(i = 0; i < obj.people.length; i++) {

  // Using jQuery + jQuery templating here as an example
  // Never used smarty but I hope this shows you the idea well enough
  $('#people-container').innerHtml += $('#people-template').tmpl( obj );

}