• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Don’t Get Skewered By “kebab-case” In Aurelia

Aurelia 1 · June 7, 2016

This is one of those daily occurences I see in the official Aurelia Gitter chatroom (not a member, come say hello here).

You are using a bindable in your application to add in binding, whether it be one-way, two-way or one-time. You might define your bindable inside of your custom element viewmodel like this:

import {bindable} from 'aurelia-framework';

export class MyNameCustomElement {
    @bindable someNameValue = '';
}

One would naturally assume that to use this attribute, you would reference it like this:

<my-name someNameValue="Dwayne"></my-name>

This is wrong and will not work.

You might be wondering why it doesn’t work and the simple explanation is: the HTML spec has no concept of casing. Everything is treated as lowercase (except text and HTML values inside of a node).

To counteract this, we use kebab-casing. If you are not familiar with the term, it means you take your bindable property, you lowercase it and separate each word with a hyphen, like a URL slug (see the URL of this blog post).

The above invalid example then becomes the following:

<my-name some-name-value="Dwayne"></my-name>

Another solution could be to define your bindable as all lowercase, but this would look messy for long bindables, taking the above example and defining it all lowercase, you would define and use it like this:

import {bindable} from 'aurelia-framework';

export class MyNameCustomElement {
    @bindable someNameValue = '';
}
<my-name some-name-value="Dwayne"></my-name>

Where The Confusion Stems From

As I explained earlier, the HTML specification is not case sensitive. Everything is lowercase and because Aurelia adheres to the specification, it assumes your attributes are lowercase and kebab-case.

The real confusion stems from the inconsistency between how you reference a bindable in your viewmodel versus how you reference it in your HTML templates.

When referencing a bindable inside of your viewmodel:
Because Javascript does have the concept of case sensitivity, if you define a bindable using camelCase, you need to refer to it the same way it was defined.

import {bindable} from 'aurelia-framework';

export class MyNameCustomElement {
    @bindable someNameValue = '';

    attached() {
        // After 5 seconds, add a name
        setTimeout(() => {
            this.someNameValue = 'Secret Name';
        }, 5000);
    }
}

Referencing the same bindable in your HTML:
Parroting what we said earlier, in HTML we use kebab-case.

<my-name some-name-value="Dwayne"></my-name>

Conclusion

That’s it. Remember your bindable values when used as attributes if you are defining them as camelCase, they become kebab case when used in HTML.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
cnlevy
cnlevy
6 years ago

Typo: One would naturally (awesome) assume

0
Shaun
Shaun
6 years ago

Hah, just ran into this trying to name a bindable “logoutURL”. Hmm. Doesn’t work. I guess I’ll try “logout-url”. Nope. Actually Aurelia expects logout-u-r-l as the attribute name. The downside of this kind of “magic” in frameworks is sometimes the magic goes wrong in confusing ways.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz