0

我刚刚了解了 mustache.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); 
            }
        });
    }
});

我不确定如何用小胡子浏览 JSON 数组。事实上，它不会更新页面，尽管注释掉的部分确实如此。

提前致谢！

4

1 回答 1

1

首先，如果您收到一个 json 字符串，您需要解析它（使用$.parseJSON(data)）

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

例如：

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

做

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

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

检查 mustache5 文档，它已经改进了很多。

于 2013-04-05T18:25:09.573 回答