Why must bindable attribute be lowercase?

1

I have a simple html-only component. search-form.html

<template bindable="searchValue">
  Search Value: ${ searchValue }
</template>

Used like this:

<require from="./search-form.html"></require>
<search-form searchValue.bind="searchValue"></search-form>

But it seems the searchValue doesn’t get shown, unless I rename it searchvalue.
Is there a reason that this must be all lowercase? Is this documented anywhere? It’s taken me quite a lot of time to work that out by trial and error.

Thanks, Will.

1 Like
2

Hi, it doesn’t. Aurelia’s naming convention is kebab case. So you should use search-value.bind instead of searchValue.bind.

Regards.

1 Like
3

The lower case on tag and attribute came from XHTML standard, although HTML is not XHTML (outdated) and is designed to be forgiving. Aurelia’s convention mentioned by @ormasoftchile tries to follow the strict rule for better compatibility and future proof.

http://www.htmlbasictutor.ca/html-tag-attributes.htm

This rule is also turned on by default in htmlhint.

https://htmlhint.io

3 Likes
4

Ironically some attribute like viewBox in svg (which is XML) didn’t follow this rule. So those XML spec designers would not even follow their own convention, which tells me why people hate XML.

Have a look of the complete list, a mess of mixed kebab case and camel case…

2 Likes
5

Thanks for the responses. I just wonder if there’s a way of making this clearer. There’s no mention on https://aurelia.io/docs/templating/custom-elements#bindable-properties that bindable attributes are case sensitive. Under the “Custom Element Basics” there’s a nice info-box warning “This is not a limitation of Aurelia. It is HTML5 who doesn’t support self-closing syntax…”.
Something like this to warn that bindable properties are case sensitive might (or might not) have saved me some pain. Or if the code itself threw some kind of error or warning (instead of failing silently)?
I’m finding the learning curve a little steep just now so anything that helps would be nice.
Thanks.

1 Like
6

If you watch Rob’s Beginning Aurelia Development video, your learning curve will be significantly reduced. Well worth the price of admission.

I also highly recommend his Intermediate Aurelia Development as well.

The Learn section of aurelia.io is your friend.

1 Like
7

There is only one brief mention in aurelia doc. https://aurelia.io/docs/cli/basics#generators

I agree this topic should be explained better…

1 Like
8

Thanks for the links.

1 Like
9

This has kicked me recently after years of working with Aurelia

1 Like