Как получить доступ к дочерним элементам в riot.js

Если у меня есть собственный тег riot с p в нем следующим образом:

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

Как мне получить доступ к элементу <p> из тега <custom>?

Обновление. Я получил ответы на все вопросы, которые можно выбрать из DOM. Я хочу, чтобы выбрать внутренний тег p из самой библиотеки компонентов riot.js. Я ищу более конкретный ответ riotjs. Например, polymer вы используете this.$.content.getDistributedNodes().

Ответ 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>

Ответ 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

Ответ 3

См. экземпляр тега.

Мы можем получить доступ к children.

customTagAndLoops = this.children

Также к DOM через root.

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

ОБНОВЛЕНИЕ - 14 февраля 2015 г.

children свойство устаревает в Riot.js v2.0.9. Единственный способ доступа к дочерним элементам - использовать root.

Ответ 4

В последних версиях Riotjs есть функция Yielding nested HTML. Смотрите документы API

В вашем случае вы можете легко сделать это следующим образом:

В определении тега:

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

В вашем приложении:

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

Из документов

Тег <yield> также предоставляет механизм слотов, который позволяет вам вводить содержимое html в определенные слоты в шаблоне

Ответ 5

Вы пробовали:

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

getElementsByTagName возвращает HTML-коллекцию, которую вы можете запросить: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Вот быстрая и грязная скрипка: http://jsfiddle.net/markm/m8n3huLn/

Ответ 6

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>

Ответ 7

The RiotJs Cheatsheet предлагает использовать выход, если я правильно понял вашу дилемму.

Объявление основного тега:

<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

Ответ 8

В бунте 3.4.2 вы можете добавить атрибут ref внутреннему элементу, который вы хотите ej:

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

// in js
this.refs.myP