Binding the ListView widget to a DataSource object

As mentioned in the previous recipe, a ListView widget can be created either by specifying the list elements in the markup or by binding it to a DataSource object. In this recipe, we will look at how ListView is populated using the DataSource object.

How to do it…

Let's create an empty list that will then be populated with data from a DataSource object:

<ul
   id="listViewContainer">

</ul>

Notice that the unordered list does not specify the data-role attribute. A ListView widget can be initialized by invoking the kendoMobileListView function on the DOM element:

var listElements = ['Her', 'Gravity', '12 Years A Slave',  'Captain Phillips', 'American Hustle',
                  'The Wolf Of Wall Street', 'Nebraska',
                  'Dallas Buyers Club', 'Philomena'];

$('#listViewContainer').kendoMobileListView({
  dataSource: listElements
});

The listElements array contains a set of strings that will then be used as a dataSource to...