locked
What if i have an input element in my ListView Template? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Here we go , this is my question and i can't find something to resolve it.

    The problem that i have this template(for data-Binding) for my Gridview:

            <div id="mytemplate" data-win-control="WinJS.Binding.Template">		<div id="questions" class="tweet">			<img src="#" style="-ms-grid-row-span: 2; width: 64px; height: 64px; margin-right: 10px;" data-win-bind="src:picture_url">			<h2 style="width:auto;-ms-grid-column: 2; -ms-grid-column-span: 1; margin-left: 1px; margin-right: 0px; -ms-grid-row-span: 2;" data-win-bind="textContent:type"></h2>				<label id="answer" ">Message</label>			</div>	</div>

    In all items , i have Message as a label 

    So when i click to an item , in the  itemInvokedHandler(eventObject) function , i make show a Flyout which contains an input text and i want that this  label will change from my input text field from the Flyout.What is the solution for that.

    Just , i am thinking about moving the label tag outside of the  template but it's not logical because it want a label for each item.

    Any suggestion or help will be well appreciated.

    Wednesday, April 3, 2013 11:19 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Brahim,

    WinJS data binding supports observable object (you can use WinJS.Binding.as method to convert a normal JSON object to an observable object), so you can make every data items in the dataSource list (which will be bound to the ListView control) as observable objects. Then, whenever the object properties be changed in code, the data bound control's UI elements (like the ListView items popuated from itemTemplate) will be updated. Here are some reference about using observable data binding object.

    #Quickstart: binding data and styles (Windows Store apps using JavaScript and HTML)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh700358.aspx

    #WinJS.Binding.as function
    http://msdn.microsoft.com/en-us/library/windows/apps/br229801.aspx

    #MVVM in WinJS Part 1 - Observable Models
    http://www.skimedic.com/blog/post/2012/11/27/MVVM-in-WinJS-Part-1-Observable-Models.aspx

    So for your scenario, you bind the dataSource list which contains observable objects to the ListView control. And then, whenever the flyout pops up for editing a certain item (record) shown in the ListView, you just change the corresponding observable object contained in the dataSource list (after user finish editing), then the ListView item UI will also be updated. By using this means, you directly update the dataSource objects and let the WinJS data binding helps you synchronize the update to UI.

    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Thursday, April 4, 2013 3:17 AM
    Moderator