使用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); 
      } 
     }); 
    } 
}); 

林不知道如何导航通过带有moustache的JSON数组......就这样，它不更新页面，尽管注释掉的部分是DO。

在此先感谢！

Answer 1

的首先，如果你收到一个JSON字符串你需要分析它（使用$.parseJSON(data)）

一旦你解析这些数据，您需要循环throught的JSON属性。

例如：

如果JSON有以下几点：体：{内容：[dataObj：{数据： 'A'}，dataObj [数据： 'B']]}

做

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

如果您使用partial，则需要在主模板内调用它们。

查看moustache5文档，它有很大提高。