在类中访问内容选择器的自定义元素

自定义元素允许您在使用自定义标记时通过<content></content>选择器访问自定义标记的内部html，以及将内容拉入该视图的某些规范。在类中访问内容选择器的自定义元素

我希望能够访问我的班级中的这些数据，而不包装标签。

我尝试了以下内容：<content ref="content"></content>和this.content引用它继databinding ref attribute战略罗布艾森伯格看好，但在元素生命周期的每个阶段console.log(this.content)产量undefined。

我想到的解决方法是将<content>标记放置在另一个元素中，使用jquery将其拖出文本并缓存，然后通过ref属性移除该元素，但这看起来不雅观。

如何在与自定义元素关联的es6类中访问这些数据？

示例方案：

一些-view.html

<template> 
    <customelement>Hello World</customelement> 
<template>

customelement.html

<template> 
    Something, but not a content tag 
</template>

customelement.js

export class CustomElement { 
    get foobar() { 
     //Somehow ascertain "Hello World" without displaying it in customelement 
    } 
}

在此示例中，可以假定自定义元素是全局包含的。

来源

2016-07-06 David

'@ processContent'装饰器能为你工作吗？ http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/9 不确定我是否完全了解您的方案 - 请考虑添加一个示例，显示您的自定义元素的预期用法。 –

@JeremyDanyow看着文档，我不知道如何继续以及过程函数如何给出这些参数。我已经用一个最小的例子更新了我的问题，希望这可以清除它 – David

我们不再使用content元素。至于RC，我们使用slot元素。也就是说，slot元素不支持ref绑定，因为slot元素有点“消失”并被替换为正在投影的内容。这是因为在Shadow DOM规范中，slot实际上不是元素，它们是“处理指令”。

来源

2016-07-06 18:40:06

好吧，没问题。如何在不使用内容标签或插槽的情况下访问数据？我宁愿在不修改输出的DOM的情况下抓取内容。 – David

下面是一个示例，显示您可以在各种组件生命周期阶段的内容中访问哪些内容。

https://gist.run?id=e372bdb91990d08ad49cdf39753cc622 **

app.html

<template> 
    <require from="./my-element"></require> 

    <my-element> 
    <div repeat.for="i of 5">${i}</div> 
    </my-element> 
</template>

我-element.html

<template> 
    Hello! 
    <slot></slot> 
</template>

我-element.js

import {inject, processContent, noView} from 'aurelia-framework'; 

@inject(Element) 
export class MyElement { 
    constructor(element) { 
    this.element = element; 
    alert('constructed:\n\n' + this.element.innerHTML); 
    } 

    created() { 
    alert('created:\n\n' + this.element.innerHTML); 
    } 

    bind() { 
    alert('bind:\n\n' + this.element.innerHTML); 
    } 

    attached() { 
    alert('attached:\n\n' + this.element.innerHTML); 
    } 
}

来源

2016-07-06 18:47:36

我测试过，并且意识到我需要添加一点澄清 - 自定义元素仍然应该正常处理和渲染，我只需要提取内容 - 就像您在这里所做的那样 - 并按照原样继续。 – David

已更新的答案。 –

所以，我认为重复div是复杂的事情。看看这个要点：https：//gist.run/？id = 6b24e48255af21f8e93dd7ae12e65162 - 我想在没有''的情况下提取“无论” – David

在类中访问内容选择器的自定义元素

回答

相关问题