修改

Question

为了使用库，我需要能够绑定到＆＃34; for＆＃34; UL元素的属性。

这不起作用：

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

根据测试我认为这是因为ul元素通常不具有for属性。我该如何解决这个问题？这在杜兰达尔/淘汰赛中是微不足道的，我认为这就像是：

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

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

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

2 个答案:

修改