Using Kendo Observable Array, Templates and Data Binding

Question

I have an Kendo datasource configured to retrive JSON data from a remote server. The response looks something like this:

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

and I want to use Kendo Template to build the markup and bind it to the data found inside the observable array. I could not find any documentation or help on Telerik's website to understand how to pull this off (or if it's even possible to pull it off). How do I iterate over the object and bind data to the markup?

Please look at this fiddle to know what I'm trying to do: http://jsfiddle.net/m2sspoos/3/

What's the best way to get this done?

Answer 1

I think that there are some misunderstanding on how binding and templates work in KendoUI. You are binding to an ObservableObject but then you pass an argument to a template. If you do this, the binding does nothing and you should use in the template something like:

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

but this will not update the data in your model.

I think that what you should do is:

Template definition:

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

The <div> element as:

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

and finally the initialization as:

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);

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/m2sspoos/5/

And a runnable code snippet:

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>