Unable to bind ModelView to a ListView

[Rihan]

Hi

I have a search screen, that lists a amount of contacts, when a user clicks on the details button on one of the list items, I want to load another view with the details of the contact.  However I am not even getting data to display.  I am not sure how I can go about troubleshooting this problem.  I have referenced this forum post ListView not working with data-bind but to no avail.

<div data-role="view" id="contactView" data-model="ContactViewModel" data-show="contactShow">

        <h1 id="ContactHallo">Contact Screen</h1>

        <ul id="contactDetailList" data-role="listview" data-style="inset">

        </ul>

</div>

function contactShow(e) {

   ContactViewModel.LoadContacts();

};

<script id="contactDetailtemplate" type="text/x-kendo-template">

    <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a>

</script>

var ContactViewModel = kendo.observable({

    ContactId: null,

 

    TestData: [{ AssociatedContactType: "n\/a", AssociatedProperties: [], EmailAddress: "n\/a", FName: "User1", HomeNumber: "n\/a", LName: "LastName", MobileNumber: "[phone]", WorkNumber: "n\/a" }],

 

    ContactData: new kendo.data.DataSource.create({ data: this.TestData }),

 

    LoadContacts: function(){

        var templatePart = $("#contactDetailtemplate").text();

        $("#contactDetailList").kendoMobileListView({

            dataSource: this.ContactData,

            template: templatePart,

            endlessScroll: true,

            scrollTreshold: 30

        });

 

    }

});

I have also created a JSFiddle

Thanks
Rihan

[Alexander Valchev]

Hi Rihan,

In the current implementation ListView widget will be initialized multiple times which is not supported. Mobile widgets should be initialized once - via data-attributes in the mark-up or via JavaScript at the init event of the parent View.

In addition, I do not see any detail buttons in the ListView. Your templates renders a single <a> element. Could you please let me know what I am missing?

Last but not least, please do not assign observable array as data of the DataSource. Either bind the ListView directly to the Observable Array (TestData) or to a DataSource component:

ContactData: new kendo.data.DataSource({
    data: [<data array>]
}),

I hope this will help. Please fix the aforementioned issues and let me know if the initial problem still persists.

On a side note, there is a code library project that demonstrates how to use mobile ListView with MVVM, edit the data and display details. You can download it from here.

Kind regards,
Alexander Valchev
the Telerik team