SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)

    non standard attributes

    I admit I have some difficulty keeping up with all the changes taking place in web dev.

    Recently I have been looking into Discourse that uses Rails and Ember.

    While trying to find selectors I might be able to use, I've noticed a lot of attributes like
    attr-name-345=
    attr-name-346=
    attr-name-347=

    This naming of attributes is foreign to me and seems wrong, but what do I know?

    Working with selectors has improved a lot since way-back, but AFAIK they work with standard attribute names and are able to target variations in the attribute values, but not where a value is incorporated into the attribute name.

    Any information about where I can learn about these would be a big help. I've looked a bit at the W3C docs but didn't find anything.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Is it data-* attributes you are seeing? http://html5doctor.com/html5-custom-data-attributes/

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Thanks, That does look like it.

    For example, a category page has
    <article data-bindattr-137="137">
    <div data-bindattr-138="138">
    <h3 data-bindattr-141="141">

    Seems redundant to have the value as part of the name.

    Any way to target them? eg. [@data-bindattr-*]
    Or should I go with node traversal?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Any way to target them? eg. [@data-bindattr-*]
    As far as I understand, they are really for JS. E.g.

    HTML Code:
    <article id="thing" data-bindattr-137="137">
    Code JavaScript:
    var article = document.getElementById('thing');
    var attybute = article.getAttribute('data-bindattr-137');
    // var attybute = article.dataset.bindattr-137;

  5. #5
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    So it must be what I thought but was hoping I was wrong.

    They're for Ember and aren't meant to be used by CSS or JavaScript from outside.

    Bummer. For the most part then I'll have to consider them as being non-existant for my intentions.

    I'll be able to put something together that doesn't rely on using them, a bit more work, but I'm stubborn persistant.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,830
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    What's wrong with <div class="data-bindattr-138"> which is a standard compliant attribute that can easily be used from CSS and/or JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    It isn't a class attribute with the value data-bindattr-143
    data-bindattr-143 is the attribute name and it has143 as its value.

    I can't see writing a mess of CSS like
    .data-bindattr-143 {
    color: #333;
    }
    etc. for all the different possible numbers, but I know of no "wildcard" like
    .data-bindattr-* (
    color: #333;
    }

    My main interest was I was hoping to use them in some JavaScript userscript code, and I could do a incrementing number thing, but IMHO that would be a very bad idea just to hit elements that may or may not even exist.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mittineague View Post
    I know of no "wildcard" like
    Code:
    .data-bindattr-* (
    color: #333;
    }
    That's easy enough with CSS. E.g.

    Code:
    [class^=data-bindattr-] {
    color: red;
    }
    Demo:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style>
    
    [class^=data-bindattr-] {
    color: red;
    }
    
    </style>
    </head>
    <body>
    
    <p class="data-bindattr-222">Some text</p>
    
    <p class="data-bindattr-333">Some text</p>
    
    <p class="data-bindattr-444">Some text</p>
    
    </body>
    </html>

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    Ah, sorry, my mistake, my examples should have been without the "class dot" eg.

    I can't see writing a mess of CSS like
    data-bindattr-143 {
    color: #333;
    }
    etc. for all the different possible numbers, but I know of no "wildcard" like
    data-bindattr-* (
    color: #333;
    }

    As the "data-bindattr...."s are not class values but attribute names

    On futher thought, those aren't good examples either. That would be like writing
    class {
    color: #F00:
    }
    id {
    color: #Faa;
    }
    (fum)

    Anyway, in other words I know of no way to deal with similar yet unique attribute names other that using an ugly loop.
    My thinking is node relationships will be the best way to approach this.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,830
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why can't you make them class values? If the value of the data-bindattr-* is always the same as the * part then you can easily extract that part in JavaScript and as demonstrated above, it is easy to set up a CSS selector for it.

    If the value of the data-bindattr-* can be different from the * then simply add it to the end as class="data-bindattr-123-456' and then use JavaScript to extract both parts.

    The JavaScript command to extract all of those as class attributes is document.querySelectorAll([class^=data-bindattr-]) then you just split the class name on the - and can get the one or two values you are interested in as the [1] and [2] entries in the resultant array.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    If it was me, I would do it that way and it would be easier to work with. Unfortunately this is a Discourse site (Rails and Ember) and not mine.
    HTML Code:
          <div class="select-posts hidden" data-bindattr-166="166">
            <button data-ember-action="167" class="hidden" data-bindattr-168="168">select +replies</button>
    To me it seems foolish or at least redundant, at best, to incorporate the value as part of the name.
    I would probably name the attributes "data-bindattr" but I don't know if that would break Ember.

    Support Topic created https://meta.discourse.org/t/data-bi...?u=mittineague

  12. #12
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,187
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    It seems it might be related to how the handlebars are coded http://stackoverflow.com/questions/1...inside-of-each
    For others who are having the problem with bindAttr resulting in something like:

    data-bindattr-1="1"

    make sure you are using

    {{bindAttr src="myvariable"}} instead of {{bindAttr src="{{myvariable}}"}}
    Which is about to become moot as Discourse is going to move from Handlebars to HTMLbars https://meta.discourse.org/t/data-bi...?u=mittineague

    Aaarrgghh! DOM changes! As long as it's an improvement I can't complain
    (much )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •