Reference Object Properties in a Kendo UI Modal View

Question

My problem relates to the Kendo UI Modal view
I have a listview, that when a listview item is clicked I want it to go to a modal view with more of the clicked items attributes there.
I can access the listview item and store it in a JS variable. However my question is how do I reference the object then in the html5 for the modal view?
My code looks like this JS Fiddle The object is currently stored in the variable 'clicked'
The only way I could think of defining the modal view as is

 <div id="modal" data-role="modalview" style="width: 95%; height: 95%;">
    <div data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-click="closeModalView" data-role="button">Close</a>            
        </div>       
    </div>
    #: clicked.name #
</div> 

But then I cant reference the clicked variables attributes...... Any help would be greatly appreciated.

Answer 1

The #: # thingy works only inside a template. In order for you to use the values outside of the template you nee to store the data in a different variable available in the global name space and use that variable inside the modal view. I have fixed your code here: http://jsfiddle.net/kendomobile/MPzVu/8/

I create a span inside the modal view <span id="modalview-text"> </span> and in the click event, stored the value inside a global variable ( listItemclicked ) and wrote the variable inside the span using this jQuery code: $('#modalview-text').text(listItemclicked.name);

<ul data-role="listview" id="eventfeed" data-click="listViewClick"></ul> 
        <div id="modal" data-role="modalview" style="width: 95%; height: 95%;">
    <div data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-click="closeModalView" data-role="button">Close</a>            
        </div>       
    </div>
            <span id="modalview-text"> </span>
</div>