使用Mustache.js从JSON响应中呈现值列表

时间:2012-10-24 12:26:13

标签: javascript jquery json mustache

我正在使用Mustache.js格式化来自jQuery getJSON()请求的响应。 getJSON请求获取图像名称列表。我希望在进行通话时在现有内容的末尾显示一系列这些图像。

返回的JSON如下所示:

[
  {"id":{"_time":1351063373,"_machine":56912161,"_inc":1690583039,"_new":false},"url":"5.jpg","tags":[]},
  {"id":{"_time":1351063237,"_machine":56912161,"_inc":1690583038,"_new":false},"url":"Repinzle-Logo.png", "tags":[]},
  {"id":{"_time":1351063186,"_machine":56912161,"_inc":1690583037,"_new":false},"url":"21.jpg","tags":[]}}
]

我正在使用每个函数解析它...我的AJAX请求(使用jQuery看起来像这样):

<script type="text/javascript">
    var imageNum=20;
    var imageCount=0;

    function getMoreImages(){
        imageCount=imageCount+imageNum;
        $.getJSON("/getImages", { start: imageNum, count: imageCount },
            function(data){
            $.each(data, function(key, val) {
                // do stuff with val.url

                var url = val.url;
                var template = $('#item-tpl').html();
                var newitem = Mustache.to_html(template, url);
                    $('#main').append(newitem);
                });     
              });
    }
</script>

这是mustache.js模板

<script id="item-tpl" type="text/html">
    <div><img src="https://myurlstem.com/mydir/{{url}}" class="item"></div>
</script>

据我所知,我已正确设置所有内容,但出于某种原因url未正确发送到模板。

1 个答案:

答案 0 :(得分:2)

您需要将对象传递给to_html方法。

var newitem = Mustache.to_html(template, { url: url });

通常情况下,我认为你会传递整个模型或集合。