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)）

解析数据后，您需要遍历JSON属性。

例如：

如果JSON具有以下内容：body：{content：[dataObj：{data：'a'}，dataObj [data：'b']]}

DO

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

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

检查moustache5文档，它已经有了很大的改进。

使用JSON创建moustache.js html模板

1 个答案: