Aurelia自定義屬性與setAttribute方法（）

看來Aurelia不知道當我創建和追加一個JavaScript元素並設置一個自定義屬性（除非我做錯了什麼）。例如，Aurelia自定義屬性與setAttribute方法（）

const e = document.createElement('div'); 
e.setAttribute('custom-attr', 'some value'); 
body.appendChild(e);

有沒有辦法讓Aurelia在被附加後意識到這個自定義屬性？

小背景：我正在創建一個應用程序，用戶可以在其中選擇元素類型（例如，輸入，選擇，複選框等）並拖動它（拖動在自定義屬性中完成）。我想創建一個包裝<div custom-attr repeat.for="e of elements"></div>，並以某種方式呈現元素數組，但這似乎效率低下，因爲中繼器會通過所有的元素，每次我推新的元素，我不想創建一個簡單的包裝可能會創建的文本輸入。

來源

2017-02-03 Jay Michael

您必須手動觸發Aurelia的enhance方法才能註冊自定義屬性或任何與Aurelia相關的內容。而且您還必須傳入包含自定義屬性的ViewResources對象。

由於這不像您想的那樣直截了當，我會稍微解釋一下。

的增強方法需要在此方案中的下列參數：

你的HTML作爲純文本（字符串）
的結合上下文（在我們的場景中，它只是this）
一個ViewResources對象具有所需的自定義屬性

訪問滿足我們要求的ViewResources對象的一種方法是require將自定義屬性放入父視圖中，然後使用父視圖的ViewResources。爲此，require視圖在父視圖的HTML內，然後在控制器中實現created(owningView, thisView)回調。當它被觸發時，thisView將具有resources屬性，該屬性是包含require -d自定義屬性的ViewResources對象。

由於我在解釋時很尷尬，請查看下面提供的示例。

下面是一個例子如何：

app.js

import { TemplatingEngine } from 'aurelia-framework'; 

export class App { 
    static inject = [TemplatingEngine]; 

    message = 'Hello World!'; 

    constructor(templatingEngine, viewResources) { 
    this._templatingEngine = templatingEngine; 
    } 

    created(owningView, thisView) { 
    this._viewResources = thisView.resources; 
    } 

    bind() { 
    this.createEnhanceAppend(); 
    } 

    createEnhanceAppend() { 
    const span = document.createElement('span'); 
    span.innerHTML = "<h5 example.bind=\"message\"></h5>"; 
    this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources }); 
    this.view.appendChild(span); 
    } 
}

app.html

<template> 
    <require from="./example-custom-attribute"></require> 

    <div ref="view"></div> 
</template>

要點。運行：

https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9

其他資源

德韋恩林頓寫了關於這一主題的優秀教程：

https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/

來源

2017-02-03 23:06:22 Travo

感謝那個資源，我不是意識到這一點。但是，我無法讓它與自定義屬性一起工作。我分叉你的要點，告訴你屬性工作，當它在元素上，然後它不工作時，我動態地添加它https://gist.run/?id=6216f60bcfc201074d81f6913d59c82c –

所以我發現，該示例將工作，如果屬性在'globalResources'下，而不在'require'標籤中。不確定（但）如何讓它與'require'標籤一起工作 –

也許你必須將它添加到元素的源代碼？我知道你可以爲增強功能提供'viewResources：ViewResources'屬性，但我真的不知道如何向它註冊資源。 – Travo

Aurelia自定義屬性與setAttribute方法（）

回答

相關問題