使用 Kendo UI 使用 objects 的数组生成动态页面

Question

我正在制作一个移动新闻应用程序。我在第一页的列表中弹出了 25 个故事（只是标题）。然后还有 9 个其他页面与此类似，但按类别分开。我想 link 每个故事作为完整文章弹出，而不使用 in-app 浏览器。我想创建一个动态生成的文章页面 JSON object.

这是我的例子 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>

我需要能够 link 我的列表 link 到此页面。任何帮助将不胜感激！

Answer 1

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

这是一个使用您的 json 的小示例，其中一个页面用于标题，一个页面用于显示该故事的详细信息。

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

使用 Kendo UI 使用 objects 的数组生成动态页面

Using Kendo UI to produce a dynamic page using an array of objects

json

telerik

kendo-ui

kendo-mobile