Если у меня есть собственный тег riot с p в нем следующим образом:
<custom>
<p>This is a text</p>
</custom>
Как мне получить доступ к элементу <p> из тега <custom>?
Обновление. Я получил ответы на все вопросы, которые можно выбрать из DOM. Я хочу, чтобы выбрать внутренний тег p из самой библиотеки компонентов riot.js. Я ищу более конкретный ответ riotjs. Например, polymer вы используете this.$.content.getDistributedNodes().
Riot предоставляет только 4 свойства для доступа к данным из текущего тега, в котором вы находитесь:
изменить
Кроме того, вы можете напрямую получить доступ к 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>
Если вы добавите атрибут 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
См. экземпляр тега.
Мы можем получить доступ к 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.
В последних версиях 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 в определенные слоты в шаблоне
Вы пробовали:
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/
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>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
В бунте 3.4.2 вы можете добавить атрибут ref внутреннему элементу, который вы хотите ej:
<custom>
<p ref="myP">This is a text</p>
</custom>
...
// in js
this.refs.myP