Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

This project is archived and is in readonly mode.

HTML5 Data Attributes

#5825

Specifying HTML5 data attributes for tags could be more streamlined. Right now you would use string keys and repetition.

To create, for example, this:

<div class="user" data-location="{&quot;city&quot;:&quot;Chicago&quot;,&quot;state&quot;:&quot;Illinois&quot;}" data-name="Stephen" id="user_1">

You would do something like this:

div_for user, 'data-name' => user.name, 'data-location' => { city: user.city, state: user.state }.to_json do
# ...

Here's a proposed simplification, using a single "data" node to define the attributes:

div_for user, data: { name: user.name, location: { city: user.city, state: user.state } } do
# ...

Seeing as data attributes are accessed primarily by JavaScript (with libraries like jQuery already interpreting embedded JSON objects), it makes sense to convert said objects to JSON automatically rather than create pseudo-nested attributes like "data-location-city" and "data-location-state".

Reported by Stephen Celis · October 16th, 2010 @ 08:54 PM

State: resolved
Milestone: 3.x
Assigned to: Xavier Noria Xavier Noria
Importance: Low

Activity

  1. Stephen Celis
  2. Aditya Sanghi
    Aditya Sanghi
    • Importance changed from to Low

    Stephen, I assume you are actually sending a hash to div_for with :data as the key or an ACTUAL json object?

    I assume it's a pure ruby hash and your example above is wrong. Checking the patch now.

    Very exciting indeed. +1 for the idea of course.

    October 16th, 2010 @ 10:12 PM

  3. Stephen Celis
    Stephen Celis

    Aditya, the example should be right but the syntax is Ruby 1.9. The 1.8.x equivalent:

    div_for user, :data => { :name => user.name, :location => { :city => user.city, :state => user.state } } do
    # ...
    

    October 16th, 2010 @ 10:16 PM

  4. Aditya Sanghi
    Aditya Sanghi
    • Milestone set to 3.x
    • Assigned user set to Xavier Noria
    • Tag set to actionview, html5, patch, tag

    The patch applies cleanly.

    This needs some documentation related updates too (and perhaps a few more tests?).

    +1 for sure!

    October 16th, 2010 @ 10:27 PM

  5. Stephen Celis
    Stephen Celis

    Thanks for taking a look!

    Happy to add documentation if the interest is there :)

    October 16th, 2010 @ 10:40 PM

  6. Aditya Sanghi
    Aditya Sanghi
    • State changed from new to open

    October 17th, 2010 @ 09:12 AM

  7. Xavier Noria
    Xavier Noria

    Stephen, excellent the idea is good. Let's work a bit on the patch.

    It would definitely need documentation. On one hand in the very method API of course. I think also that this idiom should be preferred, so existing examples would be rewritten as well. Would you please ack the tree for them?

    The call to h() could double-escape stuff, perhaps html_safe? could be checked?

    Also, assert_dom_equal would probably be better for the test.

    Would you like to work on these remarks?

    October 17th, 2010 @ 11:05 AM

  8. Aditya Sanghi
    Aditya Sanghi

    Xavier,

    Are you talking about moving all examples to the 1.9 supported format (the one similar to json)? Wouldnt that cause a bit of an uproar? I'll be happy to make the change to the documentation if its okay with Stephen.

    October 17th, 2010 @ 11:26 AM

  9. Xavier Noria
    Xavier Noria

    I mean, ack for

    ack '^\s*#.*data-'
    

    and see whether the new idiom is better in some example (perhaps the answer is there are none worth changing, don't know). The idea is that examples should implicitly communicate the preferred way of doing things.

    BTW, h() checks html_safe? it could be the case that the check is not needed.

    October 17th, 2010 @ 11:34 AM

  10. Xavier Noria
    Xavier Noria

    Ah, Aditya, regarding docs contribution.

    Any patch should have proper code, tests, and docs. Remember, the source of documentation is master. Doing a separate patch for docs would be like doing a separate patch for tests. I think it is better that there's a single patch, complete and round.

    October 17th, 2010 @ 11:44 AM

  11. Aditya Sanghi
    Aditya Sanghi

    Xavier, i misunderstood your earlier comment as moving all (even unrelated to this particular change) examples to the 1.9 format.
    Yes I understand that a patch should include all relevant bits (code, docs, test) as one commit as far as possible.

    Having said that (and feel free to PM on github if the conversation is digressing), what is the policy per ruby 1.9 way of doing things in Rails examples and documentation. Are we actively updating documentation to show the 1.9 way or still making sure the documentation is backward compatible with 1.8?

    October 17th, 2010 @ 11:54 AM

  12. Xavier Noria
    Xavier Noria

    Not really, policy is not to use 1.9 by now. Examples should run in the officially supported versions.

    When we drop 1.8 then example code should be updated to use what is considered to be best in 1.9.

    October 17th, 2010 @ 12:01 PM

  13. Stephen Celis
    Stephen Celis

    I'll clean up the patch and add 1.8-formatted docs.

    October 17th, 2010 @ 01:36 PM

  14. Stephen Celis
    Stephen Celis

    Here's an update to the patch with documentation and a couple changes:

    • Symbols will not be JSON-escaped (to avoid JavaScript ""strings"").
    • Data sub-keys will be dasherized.

    For the second change, I realized that the HTML5 JavaScript API automatically converts dashed-words to camelCase, so it makes sense to go by best practices.

    // E.g., #id[data-foo-bar="baz"]
    document.getElementById("id").dataset.fooBar // => "baz"
    

    If a person prefers more control over this, they can of course declare the entire "data-with_underscores" keys.

    October 17th, 2010 @ 02:24 PM

  15. Repository
  16. Jeff Kreeftmeijer
    Jeff Kreeftmeijer
    • Tag cleared.

    Automatic cleanup of spam.

    November 7th, 2010 @ 04:57 PM

  17. bingbing