locked
how to implement dynamic binding in html,javascript??

    Question

  • I had displayed list view with some list items.Whenever i clicked on listitem, details particular to that list item had displayed.everything went fine till now.But i want to bind the clicked list item details on some div.Please help me in this issue
    Thursday, February 21, 2013 5:47 AM

Answers

  • Hi,

    Please refer to the example as follow:

    #html of the Listview and item template:

    <div id="lvBlogFeedItemTemplate" data-win-control="WinJS.Binding.Template">
                <div  class="row" >
                    <div>
    
                        <a data-win-bind="href:uri;innerText:title" ></a> 
                        <input type="hidden" data-win-bind="value:summary" />
                    </div>
                </div>
            </div>
    
     <div id="lvBlogFeeds" 
                 
                                 data-win-control="WinJS.UI.ListView"
                                 data-win-options="{itemTemplate: select('#lvBlogFeedItemTemplate') ,layout:{type:WinJS.UI.ListLayout}}"
                >
    
            </div>

    # JS code for wrapping the event handler of ListView "iteminvoked" event. The handler locate an input hidden element within the selected item and use its value to populate another html <div> element.

    // Wrap event handlers for Listview
                var lvHost = document.getElementById('lvBlogFeeds');
                lvHost.addEventListener("iteminvoked", function (evt) {
    
        
                    evt.detail.itemPromise.then(function (invokedItem) {
                        console.log("itemInvoked: " + invokedItem.data.title);
    
                        var input = evt.srcElement.querySelector("input[type=hidden]");
    
                        MSApp.execUnsafeLocalFunction(function () {
                            document.getElementById('divMessage').innerHTML = input.value;
                        });
                    });
              
                });


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Wednesday, February 27, 2013 10:45 AM
    Friday, February 22, 2013 9:06 AM

All replies

  • Hi,

    Please refer to the example as follow:

    #html of the Listview and item template:

    <div id="lvBlogFeedItemTemplate" data-win-control="WinJS.Binding.Template">
                <div  class="row" >
                    <div>
    
                        <a data-win-bind="href:uri;innerText:title" ></a> 
                        <input type="hidden" data-win-bind="value:summary" />
                    </div>
                </div>
            </div>
    
     <div id="lvBlogFeeds" 
                 
                                 data-win-control="WinJS.UI.ListView"
                                 data-win-options="{itemTemplate: select('#lvBlogFeedItemTemplate') ,layout:{type:WinJS.UI.ListLayout}}"
                >
    
            </div>

    # JS code for wrapping the event handler of ListView "iteminvoked" event. The handler locate an input hidden element within the selected item and use its value to populate another html <div> element.

    // Wrap event handlers for Listview
                var lvHost = document.getElementById('lvBlogFeeds');
                lvHost.addEventListener("iteminvoked", function (evt) {
    
        
                    evt.detail.itemPromise.then(function (invokedItem) {
                        console.log("itemInvoked: " + invokedItem.data.title);
    
                        var input = evt.srcElement.querySelector("input[type=hidden]");
    
                        MSApp.execUnsafeLocalFunction(function () {
                            document.getElementById('divMessage').innerHTML = input.value;
                        });
                    });
              
                });


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Wednesday, February 27, 2013 10:45 AM
    Friday, February 22, 2013 9:06 AM
  • hi Tian,Thanks for your reply but above answer could not solve my question.I am displaying my code here for clarity.

    *THis is my data source in JS

    (function ()

    var dataArray = [
       { title: "Hague University,", text: "Netherland", cost: "200$", picture: "/images/resources/Arrow.png", Details: "hai" },
        { title: "Boston University", text: "Australia", cost: "250$", picture: "/images/resources/Arrow.png", Details: "hello" },
       { title: "Hague University,", text: "Netherland", cost: "200$", picture: "/images/resources/Arrow.png", Details: "dude" },
        { title: "Boston University", text: "Australia", cost: "250$", picture: "/images/resources/Arrow.png", Details: "fine" }, var    dataList = new WinJS.Binding.List(dataArray);
        var publicMembers =
            {
                itemList: dataList
            };
        WinJS.Namespace.define("visitsuper", publicMembers);

    })();

    *This is my HTML code to acces this data source:

    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
            <div style="width: 430px; height: 100px; background-color:#E7F5F4; border-width: 20px; column-count: 3; overflow:auto;">
                    <div class="headers">
                  <h4 class="header1" data-win-bind="innerText: title" style="color: #100F0F; ; left: 19.41px; top: 11.95px; font-size: 20px;"></h4>
                <h6 class="header2" data-win-bind="innerText: text" style="font-size: 15px; font-weight: 500;color: #100F0F; ; left: 38.81px; top: 46.86px;"></h6>
                <h6 class="header3" data-win-bind="innerText: cost" style="color: #100F0F; ; left: 252.24px; top: 13.43px; font-size: 15px;"></h6>
                        <img src="#" data-win-bind="alt: title; src: picture" style="; left: 374.63px; top: 7.46px;" />
                    </div>
            </div></div>

                      

    <div id="basicListView"     data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource : visitsuper.itemList.dataSource , itemTemplate: select('#mediumListIconTextTemplate'), oniteminvoked: btnClick}" >

                    </div>

    * i had written the btnClick event succesfully got the details of particular clicked list item.But i want to display that details through Data-Binding.Please help me according to  this code.........



    Sunday, February 24, 2013 8:09 AM
  • Hi Satish,

    As you said, you has written the btnClick event succesfully got the details of particular clicked list item in event oniteminvoked. Then you can display the detail in special div. I think this method is already the best choice.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 25, 2013 3:18 AM
  • hi Tian,

               Thanks for your reply.But my intention is to make data-bind to clicked list item.please help me in this issue..........

    Monday, February 25, 2013 4:29 AM
  • please give reply Tian..
    Monday, February 25, 2013 5:18 AM
  • Hi Satish,

    What is the problem now? You mean data bind the click item to special div. The above code will work properly.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 25, 2013 6:51 AM
  • yeah Tian,the code which i have written i s working properly but code which you written leads me little confusion........Why u have used id "divmessage" in your code.............If you please clarifies that whole problem will be solved.....


    Monday, February 25, 2013 8:39 AM
  • Hi Satish,

    My code just want to tell you how to do that. The scenario maybe not same with you completely. If there is no problem, please go ahead.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 25, 2013 8:46 AM