javascript - 绑定(bind)到 Aurelia 中的任意或非标准属性

Question

为了使用库，我需要能够绑定(bind)到 UL 元素的“for”属性。

这不起作用:

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

根据测试，我假设这是因为 ul 元素通常没有 for 属性。我该如何解决这个问题？这是 Durandal/淘汰赛中的一个微不足道的事情，我认为是这样的:

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

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

Answer 1

Aurelia 绝对支持绑定(bind)到 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 属性进行镜像。对于您可能添加到代码/绑定(bind)中的任意属性，不存在这种特殊逻辑。

您可以强制绑定(bind)使用 setAttribute通过创建绑定(bind)行为而不是标准行为:

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

set-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绑定(bind)行为。使用 <ul for="id & attr"> .这是更新后的示例:https://gist.run/?id=5a12f928d66b6d92c592feb6a62940ad