javascript - Binding to arbitrary or nonstandard attributes in Aurelia -

in order use library, need able bind "for" attribute of ul element.

this not work:

<ul for="${id}"> ... </ul> 

based on testing assume because ul elements don't have for attribute. how work around this? trivial in durandal / knockout believed like:

data-bind="attr: { for: $data.id }"

do have create custom attribute? going conflict built in attribute used label? other obvious workaround?

aurelia absolutely supports binding ad-hoc/arbitrary properties on dom element.

when write <ul for="${id}"> ... </ul> aurelia going assign value of id property ad-hoc property on ul element.

it's equivalent of doing ul.for = id or ul['for'] = id.

the part you're missing setting arbitrary property on dom element not automagically create corresponding html attribute. in other words, there's difference between ul.for = id , ul.setattribute('for', id). easy forget because typically work standard html attributes , dom has special logic mirror value of html attribute corresponding dom property. special logic not exist arbitrary properties might add in code/bindings.

you can force binding use setattribute instead of standard behavior creating binding behavior:

https://gist.run/?id=feedfd7659d90c0bdf6d617a244288a6

set-attribute.js

import {dataattributeobserver} 'aurelia-binding';  export class setattributebindingbehavior {   bind(binding, source) {     binding.targetobserver = new dataattributeobserver(binding.target, binding.targetproperty);   }    unbind(binding, source) {} } 

usage:

<template>   <require from="./set-attribute"></require>    <ul for.bind="id & setattribute"></ul>    <ul for="${id & setattribute}"></ul> </template> 

---

edit

aurelia ships attr binding behavior. use <ul for="id & attr">. here's updated example: https://gist.run/?id=5a12f928d66b6d92c592feb6a62940ad