如何访问 riot.js 中的子元素

Question

如果我有一个带有 p 的自定义 riot 标签，如下所示：

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

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

更新: 我从 DOM。我想要的是一种从组件库 riot.js itself. I'm looking for a more riotjs specific answer. For example with polymer 中 select 内部 p 标记的方法 this.$.content.getDistributedNodes().

Answer 1

你试过了吗：

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

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

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

Answer 2

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>

Answer 3

参见Tag instance。

我们可以访问children。

customTagAndLoops = this.children

也通过 root.

DOM

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

更新 - 2015 年 2 月 14 日

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

Answer 4

如果您将 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 中测试

Answer 5

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

this.opts
this.parent
this.root
this.tags

See the API docs

编辑

除此之外你还可以直接访问named elements:

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

see the docs

/编辑

~~没有直接引用您在自定义标签中定义的任何元素；~~ 其余的归结为纯旧的 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>

Answer 6

最新版本的 Riotjs 具有 Yielding nested HTML 功能。 See the API docs

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

在标签定义中：

<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>

来自文档

The <yield> tag also provides a slot mechanism that allows you to inject html contents on specific slots in the template

Answer 7

RiotJs Cheatsheet 建议使用 yield，如果我理解正确的话。

主标签声明：

<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

Answer 8

在riot 3.4.2中你可以给你想要的内部元素添加一个ref属性ej:

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

// in js
this.refs.myP

Answer 9

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

如果你的 html 中有这个：

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

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

<custom>
    <yield/>
</custom>

这将使 <p> 在页面上呈现

如何访问 riot.js 中的子元素

How do I access child elements within riot.js

javascript

web-component

riot.js