5

I am binding things to HTML objects using javascript and need a slightly more sophisticated mechanism than just class names.

My first approach was to use class names like structure declarations where the binding is on name position as so:

Definition = identifier: foo bar baz

Encoding some class name with this definition gives

<p   id="someid"    class="identifier bish bash bosh">
<div id="anotherid" class="identifier heebie jeebie">

This can then be read as:

{foo: bish,   bar: bash,   baz: bosh};
{foo: heebie, bar: jeebie}

Note that the bindings have different numbers of parameters.

This is very fragile. I can't decorate any html elements with additional names (for instance to add jquery behaviours like drag and drop, etc, etc) and is generally a bit shoddy...

What I would like to do is represent them as key value pairs like so:

<p   id="someid"    class="id{foo:bish} id{bar:bash} id{baz:bosh} random class">
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}">

Which allows me to have random positioning and random length of class names on elements provided my id is a sorta GUID (but I can 'make that so' manually easily enough...)

Now, in theory, classnames are CDATA, so everything should be tickety-boo, but I hae ma doots! particularly on the old cross-browser side...

Advice, suggestions, prior art, best practice on the best syntax for KV pairs in class names all gratefully received.

Gordon Guthrie
  • 6,252
  • 2
  • 27
  • 52

5 Answers5

4

HTML5 is going to add data-* attributes for just this purpose, and these already work in every browser today (but might send some validators for a loop).

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>
Joeri Sebrechts
  • 11,012
  • 3
  • 35
  • 50
  • When you say 'every browser' what exactly do you mean? Surely there are some browsers it won't be supported in? IE6? What are the limits of support for this... – Gordon Guthrie Aug 06 '09 at 06:45
  • I don't know, since I haven't used it. But as I understand it this is one of those quirks that has always worked due to browsers being tag soup parsers (only now they're standardizing it). It's not valid html ofcourse (unless you're using a html5 doctype, which does work on IE6), but there are ways of adding these attributes after the page is loaded, so validators don't complain. – Joeri Sebrechts Aug 06 '09 at 09:00
  • I server the page with these KV's and then use a library post-load to make all the magic... – Gordon Guthrie Aug 06 '09 at 16:16
  • Talked to the troops and we're going with this one, ta to everyone else who chimed in... – Gordon Guthrie Aug 06 '09 at 17:18
1

The allowed className characters will help you determine what to use.

For me, I would lean towards something like:

keys: soft, hard, wet, hot
values: foo, bar, baz, fuzz

class="soft_bar wet_foo hot_fuzz"

In particular, the braces {,} won't work as they are used in the CSS stylesheets to mark blocks of style properties.

Community
  • 1
  • 1
scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • The KV-pair class names are to used for javascript bindings and other class names are used for CSS styling - so I am not bothered at all if they can't be bound to by CSS rules. My understanding is that they will still work (need to try it and see though...) – Gordon Guthrie Aug 06 '09 at 06:48
0

it is necessary that in this class?, you could create a data for key/value in new attr

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}");
andres descalzo
  • 14,887
  • 13
  • 64
  • 115
0

If you're not concerned about valid HTML, you could just use arbitrary attribute names instead of trying to hijack the "class" attribute.

<p id="someid" foo="bish" bar="bash" baz="bosh">

And access their values from jQuery via:

$("#someid").attr("foo"); // "bish"
Jason
  • 189
  • 7
  • I'm not concerned about valid HTML :) but I suspect other people 'out there' who might want to use pages bound with this library would be... – Gordon Guthrie Aug 06 '09 at 06:49
0

Could you surround the object in question with a div or span? Then use the id and/or class attributes to store the name-value pairs and access them with parent property.

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span>

This allows you to do whatever you want to the original object.

bmb
  • 6,058
  • 2
  • 37
  • 58
  • Every other library in use on the page (JQuery etc) will bind to an object - binding to the parents of an object would kinda violate 'the principle of least astonishment' (I think...) – Gordon Guthrie Aug 06 '09 at 06:52