How do I access child elements within riot.js

2020-07-06 06:23发布

站内问答 / JavaScript
1595 9 5

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

<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().

9条回答
等我变得足够好
2楼-- · 2020-07-06 06:54

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

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: 

<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

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
3楼-- · 2020-07-06 06:57

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

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
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
4楼-- · 2020-07-06 07:01

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

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

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

in js part:

self = this

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

Tested in Riot v2.0.10

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
5楼-- · 2020-07-06 07:09

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

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

See the API docs

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

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:

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

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
6楼-- · 2020-07-06 07:09

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

if you have this in your 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

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
7楼-- · 2020-07-06 07:12

See Tag instance.

We can access to children.

customTagAndLoops = this.children

Also to DOM via root.

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

UPDATE - Feb 14, 2015

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)