使用Kendo UI使用对象数组生成动态页面

时间:2015-02-02 19:34:31

标签: json kendo-ui telerik kendo-mobile

我正在制作移动新闻应用。我在第一页的列表中弹出了25个故事(只是标题)。然后有9个类似的页面,但按类别分开。 我希望将每个故事链接为弹出的完整文章,而不使用应用内浏览器。我想创建一个动态生成JSON对象的文章页面。

以下是我的JSON示例:

{
    "ALLarticles": [
        {
            "id": 1,
            "title": "Title for 1",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. Curabitur fermentum, turpis sed porta ultricies, nulla leo volutpat nulla, eget facilisis lectus quam vitae leo. Duis et ante erat. Suspendisse quis commodo neque. Pellentesque lorem mauris, convallis vitae ultricies et, scelerisque ac massa. Ut lobortis mi quam, sit amet rutrum neque ultricies nec. Curabitur congue mauris vitae varius pellentesque. Maecenas in rutrum mauris, non sollicitudin ante. Praesent at blandit ante, sed commodo ex. Nulla vulputate lobortis urna, a placerat urna consectetur at. Ut vitae iaculis nulla, nec sagittis magna. Suspendisse faucibus consequat magna id tincidunt.</p><p>Donec vehicula porta est sit amet sollicitudin. Suspendisse potenti. Integer nec mauris ac nulla efficitur rutrum. Vivamus feugiat massa id ipsum fringilla vestibulum. Nam eget cursus eros. Donec tincidunt elementum arcu, non rhoncus quam hendrerit sit amet. Ut placerat dui a tortor hendrerit sollicitudin. Maecenas dapibus mi diam, quis molestie tellus elementum vel. Suspendisse porttitor lectus sed malesuada fermentum. Quisque facilisis faucibus justo ac varius.</p><p>Aliquam laoreet lorem in libero facilisis, vel porttitor purus aliquet. Duis egestas pharetra lectus, ac tristique nulla tempor eget. Donec in dignissim libero, ut cursus massa. Maecenas condimentum suscipit bibendum. Curabitur ut lacus id nunc gravida ultrices sit amet ut dolor. Aenean ipsum nibh, varius feugiat nisi eu, dapibus dapibus justo. Nulla accumsan pulvinar ultrices. Suspendisse faucibus magna nisi, a fermentum lectus placerat vitae. Nullam eu metus vitae lectus volutpat ultrices vitae sagittis arcu.</p>",
            "date": "2015-10-31 11:08:00",
            "author": {
                "id": 1,
                "name": "Some A. Person"
            },
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 2,
            "title": "Title for 2",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. Curabitur fermentum, turpis sed porta ultricies, nulla leo volutpat nulla, eget facilisis lectus quam vitae leo. Duis et ante erat. Suspendisse quis commodo neque. Pellentesque lorem mauris, convallis vitae ultricies et, scelerisque ac massa. Ut lobortis mi quam, sit amet rutrum neque ultricies nec. Curabitur congue mauris vitae varius pellentesque. Maecenas in rutrum mauris, non sollicitudin ante. Praesent at blandit ante, sed commodo ex. Nulla vulputate lobortis urna, a placerat urna consectetur at. Ut vitae iaculis nulla, nec sagittis magna. Suspendisse faucibus consequat magna id tincidunt.</p><p>Donec vehicula porta est sit amet sollicitudin. Suspendisse potenti. Integer nec mauris ac nulla efficitur rutrum. Vivamus feugiat massa id ipsum fringilla vestibulum. Nam eget cursus eros. Donec tincidunt elementum arcu, non rhoncus quam hendrerit sit amet. Ut placerat dui a tortor hendrerit sollicitudin. Maecenas dapibus mi diam, quis molestie tellus elementum vel. Suspendisse porttitor lectus sed malesuada fermentum. Quisque facilisis faucibus justo ac varius.</p><p>Aliquam laoreet lorem in libero facilisis, vel porttitor purus aliquet. Duis egestas pharetra lectus, ac tristique nulla tempor eget. Donec in dignissim libero, ut cursus massa. Maecenas condimentum suscipit bibendum. Curabitur ut lacus id nunc gravida ultrices sit amet ut dolor. Aenean ipsum nibh, varius feugiat nisi eu, dapibus dapibus justo. Nulla accumsan pulvinar ultrices. Suspendisse faucibus magna nisi, a fermentum lectus placerat vitae. Nullam eu metus vitae lectus volutpat ultrices vitae sagittis arcu.</p>",
            "date": "2015-10-31 11:08:00",
            "author": {
                "id": 1,
                "name": "Some A. Person"
            },
            "thumbnail": "http://example.com/image.jpg"
        },
        {
            "id": 3,
            "title": "Title for 3",
            "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id placerat nisl. In finibus scelerisque tempor. Nunc eleifend quam risus, lacinia fermentum dui tincidunt gravida. Curabitur fermentum, turpis sed porta ultricies, nulla leo volutpat nulla, eget facilisis lectus quam vitae leo. Duis et ante erat. Suspendisse quis commodo neque. Pellentesque lorem mauris, convallis vitae ultricies et, scelerisque ac massa. Ut lobortis mi quam, sit amet rutrum neque ultricies nec. Curabitur congue mauris vitae varius pellentesque. Maecenas in rutrum mauris, non sollicitudin ante. Praesent at blandit ante, sed commodo ex. Nulla vulputate lobortis urna, a placerat urna consectetur at. Ut vitae iaculis nulla, nec sagittis magna. Suspendisse faucibus consequat magna id tincidunt.</p><p>Donec vehicula porta est sit amet sollicitudin. Suspendisse potenti. Integer nec mauris ac nulla efficitur rutrum. Vivamus feugiat massa id ipsum fringilla vestibulum. Nam eget cursus eros. Donec tincidunt elementum arcu, non rhoncus quam hendrerit sit amet. Ut placerat dui a tortor hendrerit sollicitudin. Maecenas dapibus mi diam, quis molestie tellus elementum vel. Suspendisse porttitor lectus sed malesuada fermentum. Quisque facilisis faucibus justo ac varius.</p><p>Aliquam laoreet lorem in libero facilisis, vel porttitor purus aliquet. Duis egestas pharetra lectus, ac tristique nulla tempor eget. Donec in dignissim libero, ut cursus massa. Maecenas condimentum suscipit bibendum. Curabitur ut lacus id nunc gravida ultrices sit amet ut dolor. Aenean ipsum nibh, varius feugiat nisi eu, dapibus dapibus justo. Nulla accumsan pulvinar ultrices. Suspendisse faucibus magna nisi, a fermentum lectus placerat vitae. Nullam eu metus vitae lectus volutpat ultrices vitae sagittis arcu.</p>",
            "date": "2015-10-31 11:08:00",
            "author": {
                "id": 1,
                "name": "Some A. Person"
            },
            "thumbnail": "http://example.com/image.jpg"
        }
    ]
}

我想将html制作如下:

<script type="text/x-kendo-template" id="articleList-template">
        <div class="articleImg #: id #" style="background-image: url( #:thumbnail# )">
        </div>
        <h2 class="articleTitle">#: title#</h2>
        <h3 class="articleAuthorDate">
         by <span class="articleAuthor">#: author.name#</span> on <span class="articleDate">#: date #</span>
        </h3>
        <div class="articleContent">#: content #</div>
</script>

我需要能够将我的列表链接链接到此页面。任何帮助将非常感谢!

1 个答案:

答案 0 :(得分:1)

不是100%确定您要求的是什么,但将列表项链接到各种详细信息页面非常容易。
列表视图文档http://demos.telerik.com/kendo-ui/mobile-listview/index

以下是一个使用json的小样本,其中包含标题页面,以及一个显示该故事详情的页面。

http://jsbin.com/fabexo/1/edit?html,output