在HTML类名中表示键/值对的最佳方式

Question

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.

Answer 1

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>

Answer 2

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.

Answer 3

有必要在这个类？中，你可以在new attr中创建key / value的数据

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}");

Answer 4

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"

Answer 5

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.