locked
win-data-bind + querySelector

    Question

  • i have the following  template for a listview

    <div id="ListTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
         <div class="ListItem" data-win-bind="rel: song_id">
               <div class="ListItemDetail">
                     <div class="c1"><span data-win-bind="innerText: title"></span></div>
                     <div class="c2"><span data-win-bind="innerText: artist"></span></div>
                     <div class="c3"><span data-win-bind="innerText: album"></span></div>
                     <div class="c4"><span data-win-bind="innerText: duration"></span></div>
                    <div class="clear"></div>
               </div>
         </div>
    </div>

    i've inspected an item in that listview in Visual Studio's console while running the app and I saw my rel attribute binded

    but when using

    document.querySelector('[rel="' + SAME_SONG_ID + '"]');

    i get null.

    WTF?


    Saturday, October 27, 2012 8:10 PM

Answers

  • Hi,

    OK. Then please refer to: https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Monday, November 05, 2012 9:43 AM
    Monday, October 29, 2012 9:34 AM
  • Hi Gabriel,

    Based on my test, it seems when the "rel" attribute is assigned some long string (like the tile of an article), the query doesn't find the expected element. When I change to bind the title to the "title" attribute like:

    <div data-win-bind="title:title" > ....</div>

    I can correctly locate the element via:

    var elms = document.querySelectorAll("[title='the title attribute value of the target element']");
    console.log(elms.length);

    so you can try changing to use some other attributes to see if it works.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Monday, November 05, 2012 9:43 AM
    Tuesday, October 30, 2012 4:48 AM
    Moderator
  • Hi Gabriel,

    Why are you using a rel attribute with a <div>? Why can't you use an element that actually supports the rel property like an anchor tag <a> ?

    Here are the properties that you can use for a <div> and an anchor tag <a>:

    http://msdn.microsoft.com/en-us/library/ie/ms535240(v=vs.85).aspx

    http://msdn.microsoft.com/en-us/library/ie/ms535173(v=vs.85).aspx

    Thanks,

    Prashant.

    • Marked as answer by Song Tian Monday, November 05, 2012 9:44 AM
    Friday, November 02, 2012 12:25 AM
    Moderator

All replies

  • Hi,

    Please change the code:

    document.querySelector('[rel="' + SAME_SONG_ID + '"]');

    to

    document.querySelector('[rel="' + SONG_ID + '"]');
    And you may also debug that as:http://msdn.microsoft.com/en-us/library/windows/apps/hh771032.aspx .

    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework


    • Edited by Song Tian Monday, October 29, 2012 7:18 AM
    Monday, October 29, 2012 7:17 AM
  • sorry... i forgot to mention... what I write with CAPS is a random (well, not so random) value that exists somewhere in my listview in a rel html attribute.

    i even tried to get it working by hard-coding a value there and it still didn't worked.

    Monday, October 29, 2012 8:57 AM
  • Hi,

    OK. Then please refer to: https://developer.mozilla.org/en-US/docs/DOM/Document.querySelector


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Monday, November 05, 2012 9:43 AM
    Monday, October 29, 2012 9:34 AM
  • Hi Gabriel,

    Based on my test, it seems when the "rel" attribute is assigned some long string (like the tile of an article), the query doesn't find the expected element. When I change to bind the title to the "title" attribute like:

    <div data-win-bind="title:title" > ....</div>

    I can correctly locate the element via:

    var elms = document.querySelectorAll("[title='the title attribute value of the target element']");
    console.log(elms.length);

    so you can try changing to use some other attributes to see if it works.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Monday, November 05, 2012 9:43 AM
    Tuesday, October 30, 2012 4:48 AM
    Moderator
  • Gabriel, what's your goal in doing this?  There may be a better way to accomplish this via data binding instead of trying to directly select the element.
    Tuesday, October 30, 2012 3:18 PM
  • i am storing a unique hash in the rel tag.

    i use it to detect which song is playing (let's say the current song ended and the next one starts) and mark the element with a CSS class that ends up showing a 'currently playing' indicator in front of it.

    using title tag will end up on showing a tool-tip and i don't want that.

    Tuesday, October 30, 2012 8:03 PM
  • Hi Gabriel,

    Why are you using a rel attribute with a <div>? Why can't you use an element that actually supports the rel property like an anchor tag <a> ?

    Here are the properties that you can use for a <div> and an anchor tag <a>:

    http://msdn.microsoft.com/en-us/library/ie/ms535240(v=vs.85).aspx

    http://msdn.microsoft.com/en-us/library/ie/ms535173(v=vs.85).aspx

    Thanks,

    Prashant.

    • Marked as answer by Song Tian Monday, November 05, 2012 9:44 AM
    Friday, November 02, 2012 12:25 AM
    Moderator