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

If I have a custom riot tag with a p in it like this:

如果我有一个带有p的自定义防暴标签

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

How do I access the <p> element from within the <custom> tag?

如何从标记中访问

元素?

Update: I've received a whole bunch answers that are of ways to select it from the DOM. What I want is a way to select the inner p tag from within the component library riot.js itself. I'm looking for a more riotjs specific answer. For example with polymer you use this.$.content.getDistributedNodes().

更新:我收到了一大堆从DOM中选择它的方法。我想要的是从组件库*中选择内部p标签的方法。js本身。我在找一个更符合riotjs的具体答案。例如，使用聚合体您可以使用这个。$. content.getdistributednodes()。

9 个解决方案

#1

Riot only provides 4 properties to access data from the current tag you're in:

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

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

See the API docs

查看API文档

edit

编辑

Besides this you can directly access named elements:

除此之外，您还可以直接访问命名元素:

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

see the docs

看文档

/edit

/编辑

~~There's no direct reference to any of the elements you defined in your custom-tag;~~ the rest comes down to just pure old JS (which you might favour or not).

没有直接引用自定义标记中定义的任何元素;剩下的都是纯旧的JS(你可能喜欢也可能不喜欢)。

Like others stated, you can access elements using dom methods. However, in some cases you need to wait until the DOM is actually loaded. For instance:

与其他声明一样，您可以使用dom方法访问元素。然而，在某些情况下，您需要等待DOM真正加载。例如:

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

won't work, because the DOM is not ready yet. Instead wrap the selector in a 'mount' event listener like this:

不会工作，因为DOM还没有准备好。相反，将选择器包装在“挂载”事件监听器中，如下所示:

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>

#2

If you add an id or name attribute to your inner tag, you can access it via self.

如果向内部标记添加id或name属性，可以通过self访问它。

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

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

in js part:

在js的部分:

self = this

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

Tested in Riot v2.0.10

测试防暴v2.0.10

#3

See Tag instance.

看到标签实例。

We can access to children.

我们可以接触到孩子。

customTagAndLoops = this.children

Also to DOM via root.

也可以通过root访问DOM。

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

UPDATE - Feb 14, 2015

更新日期:2015年2月14日

children property is obsoleted in Riot.js v2.0.9. The only way to access child elements is using root.

儿童财产在*中被废弃了。js v2.0.9。访问子元素的唯一方法是使用root。

#4

Riotjs in latest versions has Yielding nested HTML feature. See the API docs

最新版本中的Riotjs提供了嵌套的HTML特性。查看API文档

In your case you can easily do that in this way:

在你的情况下，你可以很容易地这样做:

In tag definition:

在标签定义:

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

In your app:

在你的应用程序:

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

Rendered html:

呈现的html:

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

From the docs

从文档

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

标记还提供了一个槽机制，允许您在模板的特定槽上注入html内容

#5

In riot 3.4.2 you can add a ref attribute to the inner element that you want ej:

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

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

// in js
this.refs.myP

#6

Have you tried:

你有试过:

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

getElementsByTagName returns an HTML Collection which you can further query: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

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

Here's a quick and dirty fiddle: http://jsfiddle.net/markm/m8n3huLn/

这里有一个快速而肮脏的小提琴:http://jsfiddle.net/markm8n3huln/

#7

querySelector seems to work with custom tags:

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>

#8

The RiotJs Cheatsheet suggests using yield, if I have understood your dilemma correctly.

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

Main tag declaration:

主要标记声明:

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

Child tag declaration:

子标签声明:

<element-child-as-container>

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

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

</element-child-as-container>

Main implementation:

主要实现:

<html>
<head>
    ...
</head>
<body>
    <element-i-will-call />
</body>
</html

#9

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

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

if you have this in your html:

如果你有这个在你的html:

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

Then in your tag file you can use <yield/>

然后在标签文件中可以使用

<custom>
    <yield/>
</custom>

This will now make the <p> render on the page

这将使页面上的

呈现

#1