奧裏利亞 - 內側槽參考定製元素視圖模型

如果我有一個這樣的自定義元素：奧裏利亞 - 內側槽參考定製元素視圖模型

export class mycomponent { 
    constructor() { 
     this.name = 'John Doe'; 
    } 
} 

<template> 
    My component 
    <slot></slot> 
</template>

並使用另一個視圖內該組分（I註冊全局自定義元素）：

<template> 
    <mycomponent> 
     Test 
     ${name} 
    </mycomponent> 
</template>

是否可以在此範圍內訪問mycomponent的視圖模型？例如打印出其屬性name例如？

編輯因此，這裏是我的最終解決方案：gist my solution

我把更換部件我的自定義的元素：

<template> 
    <template replaceable part="content"></template> 
</template>

，然後在視圖模型processContent屬性：

import { processContent } from 'aurelia-framework'; 

@processContent(replacePart) 
export class MyComponent { 
    name = "John Doe"; 
} 

function replacePart(compiler, resources, node){ 
    node.innerHTML = `<template replace-part="content">${node.innerHTML}</template>`; 
    return true; 
}

像這樣，它更像一個語法更清晰的插槽：

<h4>Component 1</h4> 
<my-component> 
    <div>One name</div> 
    <strong>${name}</strong> 
</my-component>

來源

2016-11-03 John

據我所知，使用插槽無法實現。

但是，Aurelia有一個名爲replaceable parts的功能：[Blog post]。這可能更適合您的要求。

演示：https://gist.run/?id=dcffe2afcb1eee1777e9b0d9f7366d28

編輯： HUB文檔：[Cheat Sheet/Template Parts]

來源

2016-11-03 07:15:24

尼斯的答案。簡單的方法來實現我的目標。我考慮嘗試從插槽中取出內容，然後使用視圖編譯器手動編譯它，但這可能會使問題變得更加複雜。非常感謝。 – John

是的，'replaceable'是Aurelia特有的概念，但在需要時會提供更多功能。 –

@AshleyGrant：這確實是一個非凡的特徵。我想說的是，它沒有記錄在HUB上，但在備忘單中找到它。 :)更新了答案，以獲得官方消息。 –

奧裏利亞 - 內側槽參考定製元素視圖模型

回答

相關問題