JSONを使用してmoustache.js htmlテンプレートを作成

Question

私はmoustache.jsについて学びましたが、私はHTMLテンプレートを作成しようとしています。しかし、ドキュメントは解読が難しいです。私はパーシャル（私が必要と思う）を説明する良いサイトを見つけました。私は誰かが私がこれをどうする必要があるかについて私に「始めてもらう」ことができると思っていました。

私はテンプレートに変換する必要がPHPのファイルがあります。

PHP：

<div id='board'> 
<?php 
if ($threads) 
    { 
     $count = count($threads); 
     $perpage = 17; 
     $startlist = 3; 
     $numpages = ceil($count/$perpage); 
     if ($page == 'home') {$page = 1;} 
     $threadstart = ($page * $perpage) - $perpage; 
     $i = 0; 
     echo "<table class='board'> 
    <tr> 
      <th width='5%'><img src='".base_url()."img/board/icons/category_icon.png' alt='category_icon'/></th> 
      <th width='5%'>Tag</th> 
      <th width='50%'>Subject</th> 
      <th width='7.5%'>Author</th> 
      <th width='7.5%'>Replies/Views</th> 
      <th width='15%'>Last Post</th> 
    </tr>"; 
     foreach ($threads as $list) 
     { $i++; 
      $thread_owner = $this->thread_model->get_owner($list['owner_id']); 
      $thread_id = $list['thread_id']; 
      $query = $this->db->query("SELECT f.tag FROM filter_thread AS ft 
             INNER JOIN filter AS f ON ft.filter_id = f.filter_id 
             WHERE thread_id = $thread_id"); 
      $result = $query->result_array(); 
      $trunc_body = $this->thread_model->get_reply_summary($thread_id); 
      $filter = ""; 
      $filter2 =""; 
      $ent = "entertainment"; 
      foreach ($result as $string) 
      { 
       if ($string['tag'] == $ent) { 
        $filter2 .= "<div id='entertainment'><p>"; 
        $filter2 .= "<img src='".base_url()."img/board/icons/entertainment_icon.png' title='Entertainment' alt='Entertainment'/>"; 
        $filter2 .= "</p></div>"; 
       } else { 
       $filter2 .= "<div id='misc'><p>"; 
       $filter2 .= "<img src='".base_url()."img/board/icons/misc_icon.png' title='Misc' alt='Misc'/>"; 
       $filter2 .= "</p></div>"; 
       $filter .= " [".$string['tag']."]"; 
       } 
      } 
      if (!$result) { $filter = "" AND $filter2 =""; } 
      if ($i > $threadstart AND $i <= $threadstart + $perpage) 
      { 
       echo "<tr>"; 
       echo "<td>".$filter2."</td>"; 
       echo "<td>".$filter."</td>"; 
       echo "<td title='".$trunc_body['0']['body']."'><a href=".base_url()."main/thread/".$list['slug'].">".ucfirst($list['subject'])."<div id='filter'><p></p></div></a></td>"; 
       echo "<td><p>".$thread_owner."</p></td>"; 
       echo "<td align='right'>Replies: ".$list['replies_num']."<br>Views: ".$list['views']."</td>"; 
       $owner = $this->thread_model->get_owner($list['last_post_id']); 
       echo "<td>".$owner." <br>".$list['replystamp'] ."</td></tr>"; 
      } 
     } 
     echo "</table>"; 
     echo "<br>"; 
     echo "Current Page: $page | ";  
     echo "Page: "; 

     for ($n = 1; $n < $numpages+1; $n++) 
     { 
      echo "<a href=".base_url()."main/home/$n>$n</a> | "; 
     } 
    } 
?> 
</div> 

そして、ここでは、AJAX

$(function() { 
    $('#all').addClass('ui-selected') 
    $("#selectable").selectable({ 
     selected: updatefilters 

    }); 
    function updatefilters(ev, ui){ 
     // get the selected filters 
     var template, html; 
     var $selected = $('#selectable').children('.ui-selected'); 
     // create a string that has each filter separated by a pipe ("|") 
     var filters = $selected.map(function(){return this.id;}).get().join("\|"); 
     $.ajax({ 
      type: "POST", 
      url: 'updatefilters', 
      dataType: 'json', 
      data: { filters: filters }, 
      success: function(data){ 
       var template = "<div id ='board'>TESTING{{#body}}<table>"; 
       var partials = "{{#subject}}"; 
       //for (i=0 ; i< data.length ; i++) 
       //{html += "<tr><td>" + data[i].subject + "</td><td>" + data[i].body + "</td></tr>";} 
       //html += "</table></div>"; 
       var html = Moustache.to.html(template, data, partials); 
       $('#board').html(html); 
      } 
     }); 
    } 
}); 

Imがナビゲートする方法がわからないですがJSONの配列をmoustacheと..それは、それはコメントされた部品はありませんが、それはページを更新しません。

ありがとうございます！

Answer 1

まず第一にあなたはJSON属性throughtあなたがループする必要が解析されたデータを持っていたら、あなたがにそれを解析する必要がありますJSON文字列（$.parseJSON(data)を使用）

を受けている場合。例えば

：

JSONは、以下を持っている場合：本体：{内容：[dataObj：{データ： 'A'}、dataObj [デ​​ータ： 'B']}

は

を行います

<div>{{#body}}<div> 
<div>{{#content}}<div> 
<div>{{#dataObj}}<div> 
<span>{{data}}<span> 

partialを使用している場合は、メインテンプレート内で呼び出す必要があります。

moustache5のドキュメントを確認してください。