define Picked Files from File picker as Listview datasource in windows 8

Question

I am trying to Set files picked using filepiker as List view datasource. In Windows 8 using Javascript.

HTML:

<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h3 data-win-bind="innerText: title"></h3>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<div id="listView_Id" data-win-control="WinJS.UI.ListView" data-win-options="{
                    itemDataSource: FileData.itemList.dataSource,
                    itemTemplate: select('#smallListIconTextTemplate'),}">

JS:

var dataArray = new Array();
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();                
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;                
openPicker.fileTypeFilter.replaceAll([".epub"]);          
var file;
openPicker.pickMultipleFilesAsync().then(function (files) 
{        
    if (files.size > 0) 
    {            
        for (var i = 0; i < files.size; i++) 
        {         
       dataArray.push({                    
            title: files[i].displayName,                    
            text: "Author",                    
            picture: "/images/BookImage.jpg"                
        });                
            var dataList = new WinJS.Binding.List(dataArray);                
            var publicMembers = 
            {                    
                itemList: dataList                
            };                
            WinJS.Namespace.define("FileData", publicMembers);

I have array with file data. But unable to get in ListView

Answer 1

There is a binding issue in the code. FileData.itemList is not initialized at the time of page ui initialization. Right way to do that will be to have a view model observable class with itemList member and bind it to the DOM. Data Binding topic might help.

otherwise putting this should make it work. You may have to fix up your template to get the display right.

listView_Id.winControl.itemDataSource = dataList.dataSource;