Using imba with Foundation 5 css framework custom attribute containing dash "-" doesn't compile.

[imba]

Using imba with Foundation 5 css framework custom attribute containing dash "-" doesn't compile.

[judofyr]

The easiest way is to provide a custom setter:

tag nav
    def topbar= enabled
        setAttribute('data-topbar', enabled)
        self

<nav topbar=true>

Remember that the tag-syntax er merely a syntax sugar for calling setters. As long as you remember to return self in the setters, they can be as complex as you'd like.

[judofyr]

But yeah, the "proper" way would be to use:

tag nav
    prop data-topbar dom: true

But at the moment Imba will set the attribute "dataTopbar", not "data-topbar".

[mxvanzant]

Cool thanks!

On 09/16/2015 09:27 AM, Magnus Holm wrote:

The easiest way is to provide a custom setter:

|tag nav def topbar= enabled setAttribute('data-topbar', enabled) self

|

Remember that the tag-syntax er merely a syntax sugar for calling
setters. As long as you remember to |return self| in the setters, they
can be as complex as you'd like.

—
Reply to this email directly or view it on GitHub
#25 (comment).

[somebee]

Thanks for submitting the issue @mxvanzant.
I have now pushed support for data-attributes. As @judofyr mentioed, the tag-syntax is simply compiling to a chain of setters. So you cannot do <div custom=1> if you haven't defined a setCustom on the div tag. Data-attributes are special though (they are always allowed). Not sure if it is the best solution, but I've now implemented them so that data-mykey=1 compiles to .dataset('mykey',1). Please let me know if it works for you. I will push a new version to npm later today.

[mxvanzant]

Thanks. I will try it out and let you know.

On 09/19/2015 06:50 AM, Sindre Aarsaether wrote:

Thanks for submitting the issue @mxvanzant https://github.com/mxvanzant.
I have now (pushed)[02a3824
https://github.com/somebee/imba/commit/02a38247cae0d1ecace828dda0b2c598c16de316]
support for data-attributes. As @judofyr https://github.com/judofyr
mentioed, the tag-syntax is simply compiling to a chain of setters. So
you cannot do |

| if you haven't defined a |setCustom| on
the div tag. Data-attributes are special though (they are always
allowed). Not sure if it is the best solution, but I've now
implemented them so that |data-mykey=1| compiles to
|.dataset('mykey',1)|. Please let me know if it works for you. I will
push a new version to npm later today.

—
Reply to this email directly or view it on GitHub
#25 (comment).

[mxvanzant]

Works. Thanks!