locked
Binding And Retrieving Data From Divs

    Question

  • Hi,

    I need to bind data for 6 divs as shown in the image below.

    The information contained in div is some Title and  Date(Need to be shown). An ID for each Title(which comes from Service need to be hidden, not required to be shown).

    Below is the design template code.

    Each blue div(shown in fig) will have two rows.(1. Contains the Title 2. Contains the Date). So Class=TitleHolder Holds Title and  Class=Ribbon holds the date.

    And the elements are bind with data-win-bind  as shown.

    Now on click of div. I need to navigate to other page showing the entire content, which requires me the ID.

    So I  taught of  placing a div as hidden and on click trying to pull the chid elements of div and retrieve the id.

    Code of the function is shown below my html snippet.

     <div class="TitleHolder" style="background-color:blue">
                            <div data-win-bind="innerHTML: TitleID4" style="display:none"></div>
                            <div data-win-bind="innerHTML: Title4"></div>
                        </div>

    But the element.children count is being returned 0.

    Could some one help me in how efficiently I could handle this in better way if possible.

    As we cannot bind div dynamically using data-win-bind so i used a hidden div element.

    Could I get the data-win-bind source on click of the element least. or any other method that best suits the need.

     
     <div style="-ms-grid-row:3;-ms-grid-column:5;-ms-grid-column-span:2;" data-win-bind="style.visibility :visibile4" class="NewsmallDiv">
                        <div class="TitleHolder" style="background-color:blue">
                            <div data-win-bind="innerHTML: TitleID4"></div>
                            <div data-win-bind="innerHTML: Title4"></div>
                        </div>
                        <div class="Ribbon">
                            <div style="float:left">
                                <div data-win-bind="innerHTML: TitleID4" style="display:none"></div>
                                <div class="PublishedStyle">xxx<div>
                                <div class="PublishedStyle" data-win-bind="innerHTML :PublishedDate4">xxxx</div>
                            </div>
                            <div style="float:right;display:none">
                                <img src="#" />
                                <img src="#" />
                                <imgsrc="#" />
                                <img src="#" />
                            </div>
                        </div>
                    </div>

     
    //click function trying to find out id value,children[0] is the hidden div element as in design containg id
    function navigateToFullList(evt) {
            var id = null;
            var element = evt.srcElement;
    
            id = element.children[0].innerHTML;
            //pass this id for navigation.
           
        }
    
    //click event binding based on class ,as the class name is unique
    var smalldivs = document.querySelectorAll(".WhatsNewsmallDiv");
    
               
                if (smalldivs != null) {
                    for (var smalldiv = 0 ; smalldiv < smalldivs.length; smalldiv++) {
                        smalldivs[smalldiv].addEventListener("pointerdown", onPointerDown, false);
                        smalldivs[smalldiv].addEventListener("pointerup", onPointerUp, false);
                        smalldivs[smalldiv].addEventListener("click", navigateToFullList, false);
                    }
                }


    Thanks & Regards Tejaswi Chandrapatla

    Tuesday, October 29, 2013 3:13 PM

Answers

  • The hidden div is not necessary. You can save the custom data inside the element. see the example html5doctor.com/html5-custom-data-attributes/


    • Edited by yf liu Wednesday, October 30, 2013 8:19 AM
    • Marked as answer by Teja510 Wednesday, October 30, 2013 10:06 AM
    Wednesday, October 30, 2013 8:19 AM

All replies

  • The hidden div is not necessary. You can save the custom data inside the element. see the example html5doctor.com/html5-custom-data-attributes/


    • Edited by yf liu Wednesday, October 30, 2013 8:19 AM
    • Marked as answer by Teja510 Wednesday, October 30, 2013 10:06 AM
    Wednesday, October 30, 2013 8:19 AM
  • Thanks yf liu.

    Found how to bind data to custom attributes from this link.

    Could some one help me in retrieving that in JS.


    Thanks & Regards Tejaswi Chandrapatla


    • Edited by Teja510 Wednesday, October 30, 2013 10:04 AM
    Wednesday, October 30, 2013 10:04 AM
  • Thanks yf liu.

    Found how to bind data to custom attributes from this link.

    Could some one help me in retrieving that in JS.


    Thanks & Regards Tejaswi Chandrapatla


    Here is what i do, suppose you have a div in the page

    <div id="myAwsomeDiv"></div>

    Your template should have a render method

    myTemplate.render(dataBinding,document.getElementById("myAwsomeDiv")).done(function () {
    // the render is complete
    // you can bind event here,eg
    var someDiv=document.getElementById("someDiv")
    someDiv.onclick=function () {
    console.log(someDiv.getAttribute("data-myCustomData"))
    }
    });

    You may want to take a look at 

    msdn.microsoft.com/en-us/library/windows/apps/hh700356.aspx

    and

    msdn.microsoft.com/en-us/library/windows/apps/br229724.aspx

    It seems you misunderstood the Template and the actual rendered element.

    You must query the element from the rendered element but not the template itself.After the render process is complete, You can use standard DOM method (getElementById,getElementsByTagName etc,) to retrieve the elment and bind the event as normal.

    • Edited by yf liu Thursday, October 31, 2013 2:32 AM
    Thursday, October 31, 2013 2:21 AM