How to have a ListView to bind the selected item in another template using MVVM?

[rlapao]

Hi,

I have a listview that it's something like this:

<ul id="items" data-bind="source: items"></ul>

and that has selection, is bounded to a observable datasource, so i can add new items etc.
When I select an existent item I would like to bind the item details in adiv outside of the listview.

I'me doing the following in the listview change event:

var data = activitiesSource.view(),

selected = $.map(this.select(), function (item) {

      return data[$(item).index()];

});

viewModel.set("selectedItem", selected);

 The 'selectedItem' is a member of my obersable viewModel. My item details div is something like:
(i've also tried to add a data-source prop to the outside div with 'value: selectedItem' but also doesn't work)

<div class="js-item-details">

<h2 data-bind="text: selectedItem.Title"></h2>

<h3 data-bind="text: selectedItem.Descritpion"></h3>

</div>

In debug I see that the selected Item is correctly setted but when the div shows all fields ara with undefined an no errors.

Am I in the wrong path?

[rlapao]

Ok, apparently my error was in the listview change function, since it is returning an array with selected object instead of the object himself.

If I do selected[0] it works fine, but i don't understand why.

[rlapao]

Is this supposed to work?

<ul id="myKendoListView" data-bind="source: myDataSource, select: selectedItem"></ul>

$("#myKendoListView").kendoListView({

   selectable: true,

   template: kendo.template($("#someTemplate").html())

});

Am I doing something wrong?

[Lee]

Did you get this working?  I need to do something similar and am now sure where to start.  I have a listview with a datasource and want to use the change function so that when an item in the list is selected, a popup or a div layered over the top of the list shows the details for that list item selected.

[rlapao]

Hi Lee,

I get this working, but not bindind the listview to the listview select() method.

I did it binding to change event, like this:

<ul id="items-list" data-bind="source: itemsDataSource, events: { change: selectedItemChange }"></ul>

and in the js side:

$("#activities").kendoListView({

        selectable: true,

        template: kendo.template($("#item-list-template").html())

        change: function (evt) {

              // your code here

        }

    },

        ...

    });

[rlapao]

To know which item is selected I use this:

evt.sender.dataSource.view()[evt.sender.select().index()]

To the popup you can use the window kendoui control.

[Lee]

Ok, many thanks for your help.