Custom HTML attribute value is not bound

Help Requests
1

Reproduced here: https://codesandbox.io/s/aurelia-javascript-sandbox-0edzk

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>  
  <template repeat.for="page of pages">
    <div class="myclass" pagenumber.one-way="page.num">
      <div class="mydiv">${page.num}</div>
    </div>
  </template>
</template>

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
2

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
3

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
4

Glad you figured it out.

1 Like
5

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