Custom HTML attribute value is not bound

Reproduced here:

I’m trying to bind a value to a custom HTML attribute. I have an array like pages = [{ num: 1, url: "foo"}]
In my view, I have the following template:

  <template repeat.for="page of pages">
    <div class="myclass""page.num">
      <div class="mydiv">${page.num}</div>

In the sandbox, you can see that “mydiv” has the proper inner text, so the binding is working properly

> document.querySelector('.mydiv').innerText
<< 1

Trying to access the custom attribute gives me null:

> document.querySelector('.myclass').getAttribute('pagenumber') 
<< null

I couldn’t find anything in the docs regarding custom HTML attributes, is there any special syntax? What am I missing?

1 Like

From what I’m seeing in the sandbox, you are not using Aurelia to create a custom attribute. Also see Can I add a custom attribute to an HTML tag? on StackOverflow.

What are you trying to do with the pagenumber attribute on the div element?

1 Like

Ah, I see. I have to prefix the custom element with data-. I’ve never seen these html validations being enforced so it didn’t even cross my mind.

The div will also have a click event, and I’ll use the pagenumber to do some processing. I know I could just attach the pagenumber to the div id or something along these lines, but creating a dedicated attribute just seemed more straightforward.

Creating a custom attribute with aurelia just seemed overkill, although it’s probably the more correct way. I’ll look into it.
Thanks for the help

1 Like

Glad you figured it out.

1 Like

In your click binding you could just pass the value along in the function call:

<div click.trigger="someFunc(page.num)">

(if you’re at all concerned about accessibility you should choose to use a link or a button for anything that has a click event, that will make the element tabbable and “clickable” out of the box also for keyboard users)

1 Like