使用handlebar遍历JSON对象数组_Json_Jquery Mobile_Handlebars.js

使用handlebar遍历JSON对象数组

json jquery-mobile

使用handlebar遍历JSON对象数组,json,jquery-mobile,handlebars.js,Json,Jquery Mobile,Handlebars.js,我有这种格式的JSON数据 { "count": 3, "value": { "title": "Daily Feeds Mashup", "description": "Feeds Description", "items": [ { "title": "Title One",

我有这种格式的JSON数据

        {
          "count": 3,
          "value": {
            "title": "Daily Feeds Mashup",
            "description": "Feeds Description",
            "items": [
              {
                "title": "Title One",
                "link": "http://linkone.com",
                "description": "Title one description"
              },
              {
                "title": "Title Two",
                "link": "http://titletwo.com",
                "description": "Title two description"
              },
              {
                "title": "Title Three",
                "link": "http://linkone.com",
                "description": "Title three description"
              }
            ]
          }
        }

“items”部分是一个数组。如何在Handlebar中构造模板，以便在jQM listview中生成html结果。下面是我目前拥有的完整html源代码，包括JavaScript

    <script src="libs/jquery-2.0.3.min.js"></script>
    <script src="libs/jquery.mobile-1.4.0.min.js"></script>
    <script src="libs/handlebars-v1.3.0.js"></script>

    <link rel="stylesheet" href="../styles.css">

    <script type="text/javascript">
        $("document").ready(function() {

            var template = $("#itemTemplate").html();
            var renderer = Handlebars.compile(template);
            var result = renderer({
                "count" : 3,
                "value" : {
                    "title" : "Daily Feeds Mashup",
                    "description" : "Feeds Description",
                    "items" : [{    
                        "title" : "Title One",
                        "link" : "http://linkone.com",
                        "description" : "Title one description"
                    }, {
                        "title" : "Title Two",
                        "link" : "http://titletwo.com",
                        "description" : "Title two description"
                    }, {
                        "title" : "Title Three",
                        "link" : "http://linkone.com",
                        "description" : "Title three description"
                    }]
                }
            });
            $("#container").html(result);
        });
    </script>
</head>
<body>
    <div data-role="page" id="home">
        <div data-role="header">
            <h3>Header<h3>
        </div>

        <div data-role="content">
            <script type="text/x-handlebars-template" id="itemTemplate">
                <ul data-role="listview" id="posts">
                    {{#each items}}
                        <li>
                            <a data-transition="" href="{{{link}}}">
                                <p>{{{title}}}</p>
                                <small>{{{description}}}</small>
                            </a>
                        </li>
                    {{/each}}
                </ul>
            </script>

            <h1>This is my header one</h1>
            <h3>This is my header three</h3>

            <!-- This is the container where the templates will be instantiated -->
            <div id="container"></div>

        </div>


    </div><!-- page -->
</body>


$（“文档”）.ready（函数（）{
var template=$（“#itemTemplate”）.html（）；
var renderer=handlebar.compile（模板）；
var result=渲染器({
“计数”：3，
“价值”：{
“标题”：“每日提要Mashup”，
“描述”：“提要描述”，
“项目”：[{
“标题”：“标题一”，
“链接”：http://linkone.com",
“说明”：“标题一说明”
}, {
“标题”：“标题二”，
“链接”：http://titletwo.com",
“说明”：“标题二说明”
}, {
“标题”：“标题三”，
“链接”：http://linkone.com",
“说明”：“标题三说明”
}]
}
});
$（“#容器”）.html（结果）；
});
标题

{{{#每项}


{{/每个}}

这是我的头球
这是我的头球三

工作示例：

更新：工作区：

HTML: 工作示例：

更新：工作区：

HTML: 工作示例：

更新：工作区：

HTML: 工作示例：

更新：工作区：

HTML:

我见过这样的例子。似乎无法将其应用于这种特殊类型的问题。您可以看到，items上的数组不在json数据的主级别上。不知怎的，这就是为什么我不能访问它。你能不能用我的资料做一个工作，这样我就能知道我到底在哪里错过了它！！！你是个极客。我不可能像你那样想。谢谢你太过分了！我也是一个有声望的人，所以如果这是你需要的，别忘了接受和投票；）哈哈！你说得对，我做了。请把这个问题和这个联系起来：这正是我想要做的。但是这次我从Pipes服务中得到了JSON文件，它成功了。你想让我把它放在我之前的回答中吗？我见过这样的例子。似乎无法将其应用于这种特殊类型的问题。您可以看到，items上的数组不在json数据的主级别上。不知怎的，这就是为什么我不能访问它。你能不能用我的资料做一个工作，这样我就能知道我到底在哪里错过了它！！！你是个极客。我不可能像你那样想。谢谢你太过分了！我也是一个有声望的人，所以如果这是你需要的，别忘了接受和投票；）哈哈！你说得对，我做了。请把这个问题和这个联系起来：这正是我想要做的。但是这次我从Pipes服务中得到了JSON文件，它成功了。你想让我把它放在我之前的回答中吗？我见过这样的例子。似乎无法将其应用于这种特殊类型的问题。您可以看到，items上的数组不在json数据的主级别上。不知怎的，这就是为什么我不能访问它。你能不能用我的资料做一个工作，这样我就能知道我到底在哪里错过了它！！！你是个极客。我不可能像你那样想。谢谢你太过分了！我也是一个有声望的人，所以如果这是你需要的，别忘了接受和投票；）哈哈！你说得对，我做了。请把这个问题和这个联系起来：这正是我想要做的。但是这次我从Pipes服务中得到了JSON文件，它成功了。你想让我把它放在我之前的回答中吗？我见过这样的例子。似乎无法将其应用于这种特殊类型的问题。您可以看到，items上的数组不在json数据的主级别上。不知怎的，这就是为什么我不能访问它。你能不能用我的资料做一个工作，这样我就能知道我到底在哪里错过了它！！！你是个极客。我不可能像你那样想。谢谢你太过分了！我也是一个有声望的人，所以如果这是你需要的，别忘了接受和投票；）哈哈！你说得对，我做了。请把这个问题和这个联系起来：这正是我想要做的。但是这次我从Pipes服务中得到了JSON文件，它成功了。你想让我把它放在我之前的回答中吗？

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content">
                <script id="items-template" type="text/x-handlebars-template">
                    {{#.}}
                    <li><a href="{{this.link}}"><h3>{{this.title}}</h3><p>{{this.description}}</p></a></li>
                    {{/.}}
                </script>                
                <ul id ="items_list" data-role="listview" data-filter="true">
                </ul>           
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

$(document).on('pagebeforeshow', '#index', function(){ 
    var items = {
        "count": 3,
        "value": {
            "title": "Daily Feeds Mashup",
            "description": "Feeds Description",
            "items": [
                {
                    "title": "Title One",
                    "link": "http://linkone.com",
                    "description": "Title one description"
                },
                {
                    "title": "Title Two",
                    "link": "http://titletwo.com",
                    "description": "Title two description"
                },
                {
                    "title": "Title Three",
                    "link": "http://linkone.com",
                    "description": "Title three description"
                }
            ]
        }
    };

    var itemsHandler = Handlebars.compile($("#items-template").html());
    $('#items_list').html(itemsHandler(items.value.items)); 
    $('#items_list').listview().listview('refresh');
});