Использование наблюдаемого массива Kendo, шаблонов и привязки данных

Question

У меня есть источник данных Kendo, предназначенный для извлечения данных JSON с удаленного сервера. Ответ выглядит примерно так:

[ 
    { 
     "array":[ 
     { 
      "moreData":"some string" 
     }, 
     { 
      "moreData":"some string" 
     }, 
     { 
      "moreData":"some string" 
     } 
     ], 
     "moreInfo":"string", 
     "someMore":22 
    } 
] 

и я хочу использовать кендо шаблон для создания разметки и связать его с данными, полученными в наблюдаемом массиве. Я не мог найти какую-либо документацию или помощь на веб-сайте Telerik, чтобы понять, как это сделать (или даже можно снять его). Как выполнить итерацию объекта и привязать данные к разметке?

Пожалуйста, посмотрите на эту скрипку, чтобы знать, что я пытаюсь сделать: http://jsfiddle.net/m2sspoos/3/

Что лучший способ получить это сделать?

Answer 1

Я думаю, что есть некоторые недоразумения относительно того, как привязка и шаблоны работают в KendoUI. Вы привязываетесь к ObservableObject, но затем передаете аргумент шаблону. Если вы сделаете это, связывающее ничего не делает, и вы должны использовать в шаблоне что-то вроде:

<script id="template" type="text/x-kendo-template"> 
    More Data: <input value="#= moreData #"/> 
</script> 

, но это не будет обновлять данные в модели.

Я думаю, что вы должны сделать, это: определение

Шаблон:

<script id="template" type="text/x-kendo-template"> 
    More Data: <input data-bind="value: moreData"/> 
</script> 

<div> элемент как:

<div id="view" 
    data-role="list-view" 
    data-bind="source: array" 
    data-template="template"> 
</div> 

и, наконец, инициализации, как:

var viewModel = kendo.observable({ 
    "array": [ 
    { "moreData":"some string 1" }, 
    { "moreData":"some string 2" }, 
    { "moreData":"some string 3" } 
    ], 
    "moreInfo":"string", 
    "someMore":22 
}); 
kendo.bind($("#view"), viewModel); 

Ваш JSFiddle Модифицированные здесь: http://jsfiddle.net/OnaBai/m2sspoos/5/

И работоспособной фрагмент кода:

var viewModel = kendo.observable({ 
 
    "array": [ 
 
     { "moreData":"some string 1" }, 
 
     { "moreData":"some string 2" }, 
 
     { "moreData":"some string 3" } 
 
    ], 
 
    "moreInfo":"string", 
 
    "someMore":22 
 
}); 
 
kendo.bind($("#view"), viewModel);

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> 
 
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> 
 
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 
 

 
<script id="template" type="text/x-kendo-template"> 
 
    <div> 
 
     More Data: <input data-bind="value: moreData" /> 
 
    </div> 
 
</script> 
 

 
<div id="view" 
 
    data-role="list-view" 
 
    data-bind="source: array" 
 
    data-template="template"> 
 
</div>