12

如果我有一个像这样的自定义riot标签：p

<custom>
  <p>This is a text</p>
</custom>

如何<p>从<custom>标签内访问元素？

更新：我收到了一大堆从 DOM 中选择它的方法的答案。我想要的是一种p从组件库riot.js本身中选择内部标记的方法。我正在寻找一个更 riotjs 具体的答案。例如，您使用的聚合物this.$.content.getDistributedNodes()。

4

9 回答 9

18

Riot 仅提供 4 个属性来访问您所在的当前标签中的数据：

  • 这个.opts
  • 这个.parent
  • 这个.root
  • this.tags

请参阅 API 文档

编辑

除此之外，您还可以直接访问named elements：

<my-tag>
  <p name="foo">Hi, I'm foo</p>
  <script>
    console.log(this.foo);
  </script>
</my-tag>

查看文档

/编辑

没有直接引用您在自定义标签中定义的任何元素；其余的归结为纯粹的旧 JS（您可能喜欢或不喜欢）。

像其他人所说，您可以使用 dom 方法访问元素。但是，在某些情况下，您需要等到 DOM 实际加载完毕。例如：

<my-tag>
  <p>yada</p>
  <script>
    console.log(this.root.querySelector('p'))
  </script>
</my-tag>

不会工作，因为 DOM 还没有准备好。而是将选择器包装在 'mount' 事件侦听器中，如下所示：

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>
于 2015-03-30T20:26:51.813 回答
7

如果您将 id 或 name 属性添加到您的内部标签，您可以通过self.

// with 'id'
<custom><p id="pTest">Test</p></custom>

// with 'name'
<custom><p name="pTest">Test</p></custom>

在js部分：

self = this

self.pTest
>>  <p id=pTest>Test</p>

在 Riot v2.0.10 中测试

于 2015-02-19T12:02:03.307 回答
5

请参阅标记实例。

我们可以访问children.

customTagAndLoops = this.children

也可以通过root.

iAmDom = this.root
childNodes = this.root.childNodes
p = this.root.querySelector('p')

更新 - 2015 年 2 月 14 日

childrenRiot.js v2.0.9 中的属性已过时。访问子元素的唯一方法是使用root.

于 2015-02-10T23:48:21.400 回答
1

在 riot 3.4.2 中，您可以将 ref 属性添加到您想要 ej 的内部元素：

<custom>
  <p ref="myP">This is a text</p>
</custom>
...

// in js
this.refs.myP
于 2017-04-21T03:35:20.253 回答
1

最新版本的 Riotjs 具有Yielding nested HTML功能。 请参阅 API 文档

在您的情况下，您可以通过以下方式轻松做到这一点：

在标签定义中： 

<custom>
 <!-- tag markup-->
 <div id="place for custom html">
   <yield/>
 </div>
</custom>

在您的应用中： 

<custom>
  <p>This is a text</p>
</custom>

呈现的html： 

<custom>
  <div id="place for custom html">
    <p>This is a text</p>
  </div>
</custom>

从文档

该<yield>标签还提供了一种插槽机制，允许您在模板中的特定插槽上注入 html 内容

于 2016-04-16T08:06:45.800 回答
0

你有没有尝试过：

nodes = document.getElementsByTagName('custom');
for (var i = 0; i< nodes.length; ++i) {
    paragraphs = nodes[i].getElementsByTagName('p');
    alert(paragraphs[0].innerText);
}

getElementsByTagName返回一个 HTML 集合，您可以进一步查询：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

这是一个快速而肮脏的小提琴：http: //jsfiddle.net/markm/m8n3huLn/

于 2015-01-30T23:38:04.667 回答
0

querySelector似乎适用于自定义标签：

document.querySelector('custom p').innerHTML= 'Test complete';
<p>This is a test</p>
<custom>
  <p>This is a test</p>
</custom>
<p>This is a test</p>

于 2015-01-30T23:45:57.240 回答
0

如果我正确理解了您的困境，RiotJs Cheatsheet建议使用产量。

主要标签声明：

<element-i-will-call>

  <span>I am a title</span>

  <element-child-as-container>
    <yield to='header'>Hello User</yield>
    <yield to='conent'>You are here</yield>
  </element-child-as-container>

</element-i-will-call>

子标签声明：

<element-child-as-container>

  <h2>
    <yield from='header'/>
  </h2>

  <div>
    <yield from='conent'/>
  </div>

</element-child-as-container>

主要实现：

<html>
<head>
    ...
</head>
<body>
    <element-i-will-call />
</body>
</html
于 2016-11-30T11:56:36.507 回答
0

https://riot.js.org/api/#-yielding-nested-html

如果你的 html 中有这个：

<custom>
  <p>This is a text</p>
</custom>

然后在你的标签文件中你可以使用<yield/>

<custom>
    <yield/>
</custom>

这将<p>在页面上进行渲染

于 2018-06-25T22:23:07.717 回答