HTML templating


HTML Templating


  • 上の商品リストデータをAjaxでJSON形式のデータを受信して画面に追加する必要があると仮定します.
  • リストの構造は似ているので、使用するtagもそれほど悪くないはずです.このときテンプレートの概念
  • を導入することが望ましい.

    HTMLテンプレート操作とは?

  • で繰り返されるHTML部分をテンプレートとし、サーバからのデータ(主にJSON)と合わせて画面に追加します.
  • 連結プロセスの解決

    var data = {  title : "hello",
                  content : "lorem dkfief",
                  price : 2000
               };
    var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
    
    html.replace("{title}", data.title)
        .replace("{content}", data.content)
        .replace("{price}", data.price);
        // 메서드 체이닝
  • に示すようにJSONとHTMLテンプレートを結合すればよい.
  • メソッドフィルタ:メソッドがオブジェクトを返すと、メソッドの戻り値であるオブジェクトから別の関数を呼び出すことができます.