Связывание с произвольными или нестандартными атрибутами в Aurelia

Question

Чтобы использовать библиотеку, мне нужно иметь возможность привязываться к атрибуту «для» элемента UL.

Это не работает:

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

на основе тестирования Я полагаю, это потому, что ul элементы обычно не имеют атрибут for. Как мне обойти это? Это было тривиальным в Дюрандаль/нокаута, который я считал что-то вроде:

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

ли я на самом деле нужно создать пользовательский атрибут? Это противоречит встроенному атрибуту, используемому для label? Любое другое очевидное обходное решение?

Answer 1

Aurelia абсолютно поддерживает связывание с Ad-Hoc/произвольных свойств на DOM элемента ,

Когда вы пишете <ul for="${id}"> ... </ul> Aurelia собирается присвоить значение свойства id специальному объявлению на элементе ul.

Это эквивалент ul.for = id или ul['for'] = id.

Части вы упускаете это установку произвольного свойства на элементе DOM не автомагический создать соответствующую HTML атрибута. Другими словами, существует разница между ul.for = id и ul.setAttribute('for', id). Это легко забыть, потому что мы обычно работаем со стандартными атрибутами html, а DOM имеет специальную логику, чтобы отразить значение атрибута HTML с соответствующим свойством DOM. Эта специальная логика не существует для любых свойств, которые вы могли бы добавить в свой код/​​привязки.

Вы можете заставить связывание использовать setAttribute вместо стандартного поведения путем создания обязательного поведения:

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

установку атрибута.JS

import {DataAttributeObserver} from 'aurelia-binding'; 

export class SetAttributeBindingBehavior { 
    bind(binding, source) { 
    binding.targetObserver = new DataAttributeObserver(binding.target, binding.targetProperty); 
    } 

    unbind(binding, source) {} 
} 

использование:

<template> 
    <require from="./set-attribute"></require> 

    <ul for.bind="id & setAttribute"></ul> 

    <ul for="${id & setAttribute}"></ul> 
</template> 

---

EDIT

Aurelia теперь поставляется с обязательным поведением attr. Используйте <ul for="id & attr">. Вот обновленный пример: https://gist.run/?id=5a12f928d66b6d92c592feb6a62940ad

Answer 2

В итоге я создал атрибут для этого.

export class MdlForCustomAttribute { 
    static inject = [Element]; 

    element : HTMLElement; 
    constructor(element) { 
     this.element = element; 
    } 

    valueChanged(newValue, oldValue) { 
     this.element.setAttribute('for', newValue); 
    } 
} 

Использование:

<ul mdl-for.bind="id">...</ul>

Такой сценарий может поддерживаться в будущих версиях: https://github.com/aurelia/templating-binding/issues/94