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

Question

如果我有一个自定义riot标签,p其中包含:

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

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

更新:我收到了一大堆答案,可以从DOM中选择它.我想要的是一种p从组件库 riot.js本身中选择内部标签的方法.我正在寻找更具骚动的具体答案.例如用聚合物使用this.$.content.getDistributedNodes().

Answer 1

Riot仅提供4个属性来访问您当前标记中的数据:

• this.opts
• this.parent
• this.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>

Answer 2

如果您向内部标记添加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 3

请参阅标签实例。

我们可以访问children.

customTagAndLoops = this.children

也可以通过 DOM root。

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

更新 - 2015 年 2 月 14 日

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