Non standard attributes

HTML & CSS
1

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

Is it data-* attributes you are seeing? http://html5doctor.com/html5-custom-data-attributes/

3

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

As far as I understand, they are really for JS. E.g.

<article id="thing" data-bindattr-137="137">

var article = document.getElementById('thing');
var attybute = article.getAttribute('data-bindattr-137');
// var attybute = article.dataset.bindattr-137;
5

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

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.

7

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

That’s easy enough with CSS. E.g.

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

Demo:

<!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

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

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.

11

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.

      <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-bindattr-attributes/15454?u=mittineague

12

It seems it might be related to how the handlebars are coded http://stackoverflow.com/questions/12848861/emberjs-bindattr-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-bindattr-attributes/15454/4?u=mittineague

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