MVVM source data-bind to list view for detail view

[Jonathan M]

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

[Alexander Valchev]

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