0

Web サイトで 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>
}

しかし、AJAX 以外のすべてのコンテンツにSmarty テンプレート エンジンを使用しているため、Javascript に HTML とクラスが埋め込まれていることに罪悪感を覚えずにはいられません。

テンプレートエンジンはページの読み込み時に実行され、ページの読み込み後にAJAX呼び出しが行われるため、AJAX応答にSmartyを使用できないと考えました...これを行うためのより良い方法はありますか?

4

1 に答える 1

0

サンプルコードを載せていただけると助かります。ただし、あなたを正しく理解している場合は、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 );

}
于 2013-09-04T03:25:40.887 に答える