绑定到Aurelia中的任意或非标准属性

Question

为了使用库,我需要能够绑定到UL元素的"for"属性.

这不起作用:

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

基于测试我假设这是因为ul元素通常没有for属性.我该如何解决这个问题？这在Durandal/knockout中是微不足道的,我相信它是这样的:

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

我真的必须创建自定义属性吗？这会与用于的内置属性冲突label吗？还有其他明显的解决方法吗

Answer 1

Aurelia绝对支持绑定到DOM元素上的ad-hoc /任意属性.

当你写<ul for="${id}"> ... </ul>Aurelia时,要将id属性的值赋给ul元素上的ad-hoc属性.

这相当于做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

设置attribute.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>

编辑

Aurelia现在带有attr绑定行为.使用<ul for="id & attr">.这是更新的示例:https://gist.run/？id = 5a12f928d66b6d92c592feb6a62940ad