爲了使用庫，我需要能夠綁定到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中綁定到任意或非標準屬性

回答

編輯

相關問題