为了使用库，我需要能够绑定到UL元素的“for”属性。在Aurelia中绑定到任意或非标准属性

这不起作用：

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

根据测试我想这是因为ul元素通常不具有for属性。我如何解决这个问题？这是迪朗达尔/击倒一个微不足道的，我认为是这样的：

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

难道我真的要创建一个自定义属性？这是否与用于label的内置属性相冲突？任何其他明显的解决方法？

来源

2016-07-25 Shaun Rowan

不 - 这是图书馆的要求，所以它必须是'for'https://getmdl.io/components/index.html#menus-section –

这是有帮助的，但我不'不是真的购买推理。有很多有效的aurelia属性可以在UL元素上不是“标准”的。我认为应该包含绑定到任意属性的简单方法，就像它包含在durandal/knockout中一样。 –

我认为这可以得到支持。在模板绑定的回购中打开一张票，有人应该回复给您关于PR的建议。 –

Aurelia路上绝对支持DOM元素结合的ad-hoc /任意属性：

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

这种情况可能会在未来的版本中支持。

当您编写<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有特殊的逻辑来用相应的DOM属性来镜像HTML属性的值。这个特殊的逻辑对于你可能在你的代码/绑定中添加的任意属性不存在。

您可以强制绑定使用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>

编辑

奥里利亚现在附带一个attr绑定行为。使用<ul for="id & attr">。这是更新的例子：https://gist.run/?id=5a12f928d66b6d92c592feb6a62940ad

来源

2016-07-25 17:53:58

这看起来像比我下面发布的更好的解决方案，因为它可以用于其他属性，但我仍然认为这是非常不令人满意的。当我做'id.bind =“id”'它设置id属性。当我做'data-foo.bind =“id”'时，它设置data-foo属性。令人惊讶和不直观的是，这里的默认行为是在DOM元素上设置一个甚至不存在的属性。此外，DataAttributeObserver不在文档中，甚至不在aurelia-binding.d.ts文件中。我仍然相信aurelia需要一个更好的开箱即用的解决方案。 –

'id'是一个内置的。无论您使用'setAttribute（id，...）'还是'el.id = ...'，DOM都将同步属性值和属性值。仔细考虑这一点，只考虑你的用例，看起来目前的行为可能是不可取的。对于其他用例，无故调用'setAttribute'会对性能产生影响，这会成为一种破坏行为。我同意应该有更多的文档。它永远不会伤害有更多的文档。 DOM可能会令人困惑。例如，保留'for'属性示例，但使用''元素代替，该属性为'htmlFor'！ –

我明白了。我认为data- *的工作方式与id相同？也许某种attr.bind语法或类似的将会很有用。 –

我最终为此创建了一个属性。

export class MdlForCustomAttribute { 
    static inject = [Element]; 

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

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

用法：https://github.com/aurelia/templating-binding/issues/94

来源

2016-07-25 15:54:55

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

回答

编辑

相关问题