Использование пользовательского интерфейса Kendo для создания динамической страницы с использованием массива объектов

Question

Я работаю над созданием приложения для мобильных новостей. У меня есть 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> 

Мне нужно, чтобы иметь возможность связать мой список ссылок на эту страницу , Любая помощь будет очень оценена!

Answer 1

Не уверен, что вы просите, но ссылка на элемент списка на страницу сведений очень проста.
ListView документация http://demos.telerik.com/kendo-ui/mobile-listview/index

Вот небольшой пример с помощью JSON со страницей для заголовков и страницы, чтобы показать подробности этой истории.

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