This is a migrated thread and some comments may be shown as answers.

MVVM source data-bind to list view for detail view

1 Answer 393 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jonathan M
Top achievements
Rank 1
Jonathan M asked on 13 Dec 2012, 05:45 PM
I'd like to display the detail of a record inside a list view within my detail view. I'm trying to use an MVVM source binding and a data-template attribute to specify the list items and how they should look. Like this:
<script>
    var model = kendo.observable({
        user: {
            firstName: 'Jonathan',
            lastName: 'Marston',
            age: 29,
            isSubscribed: true,
            subscriptionType: 'monthly'
            subscriptionDate: new Date(2012, 12, 12)
        }
    });
</script>
 
<script id="detailTemplate" type="text/html">
    <li><label>First Name</label>#: data.firstName #</li>
    <li><label>Last Name</label>#: data.lastName #</li>
    <li><label>Age</label>#: age #</li>
     # if (data.isSubscribed) {
         if (data.subscriptionType == 'monthly') { #
             <li>Monthly subscription</li>
         # } else { #
             <li>Yearly subscription</li>
         # } #
         <li><label>Subscribed</label> #: kendo.format(data.subscriptionDate, 'MM/dd/yyyy') #</li>
     # } else { #
         <li>Not subscribed</li>
     # } #
</script>
 
<div data-role="view" data-model="model">
    <ul data-role="listview" data-template="detailTemplate" data-bind="source: user">
    </ul>
</div>
Unfortunately it appears that the Kendo ListView component is interfering with the source binding because it expects to be bound to an array and have the data-template point to a template for each element in the array.

Is there any way to bind a list view to a flat structure like I'm trying to do here? I'd do <span>s with data-bind="text: ..." bindings, but the display logic is a bit too complicated for simple data bindings...

Thanks,
Jonathan

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 15 Dec 2012, 08:48 AM
Hello Jonathan,

You are correct - the DataSource works only with arrays, binding to a single object is not supported.
As a solution for your case I suggest you to wrap the "user" object inside an array. In addition it is not recommended to add a <li> elements in the ListView template - the widget will automatically generate a <li> element for each item in the source array.

Instead please use source and template binding for <div> element and render the ListView widget in the template. For example:
<!-- view -->
<div data-role="view" data-model="model">
    <div data-template="detailTemplate" data-bind="source: user">
    </div>
</div>
<!-- template -->
<script id="detailTemplate" type="text/html">
    <ul data-role="listview">
        <li> <label>First Name </label>#:firstName # </li>
        <li> <label>Last Name </label>#:lastName # </li>
        <li> <label>Age </label>#: age # </li>
        # if (isSubscribed) {
            if (subscriptionType == 'monthly') { #
                <li> Monthly subscription </li>
                # } else { #
                <li> Yearly subscription </li>
                # } #
            <li>
                <label>Subscribed</label> #: kendo.format('{0:MM/dd/yyyy}', subscriptionDate) #
            </li>
            # } else { #
            <li> Not subscribed </li>
            # } #
    </ul>
</script>
<!-- view model -->
<script>
    var model = kendo.observable({
        user: [{
            firstName: 'Jonathan',
            lastName: 'Marston',
            age: 29,
            isSubscribed: true,
            subscriptionType: 'monthly',
            subscriptionDate: new Date(2012, 12, 12)
        }]
    });
</script>

For convenience I prepared a runnable sample: http://jsbin.com/adesek/2/edit

In addition I corrected the syntax of kendo.format method. I hope this will help.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
Jonathan M
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or