creating a moustache.js html template using JSON - php

Question

I just learned about moustache.js and i am attempting to create an HTML template. However, the documentation is a bit hard to decipher. I found a good site that explains partials (which I believe I will need). I was hoping someone might be able to just 'get me started' on how I would need to do this.
I have a php file that I need to convert to the template:
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']."'>".ucfirst($list['subject'])."<div id='filter'><p></p></div></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>
And here is the 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 not sure how to navigate through the JSON array with moustache..and as it is, it does not update the page, though the commented out parts DO.
Thanks in advance!

Answer 1

First of all if you are receiving a json string you will need to to parse it (use $.parseJSON(data))
Once you have the data parsed you need to loop throught the JSON attributes.
For example:
If JSON has the following: body: {content: [dataObj:{data:'a'}, dataObj[data:'b']]}
do
<div>{{#body}}<div>
<div>{{#content}}<div>
<div>{{#dataObj}}<div>
<span>{{data}}<span>
If you are using partial, you will need to call them inside the main template.
Check the moustache5 documentation, it has improved a lot.