How do I access child elements within riot.js

廉价感情. 提交于 2019-12-04 03:10:23

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

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

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.

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

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

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

// in js
this.refs.myP

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

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

querySelector seems to work with custom tags:

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>

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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!