Wie greife ich untergeordnete Elemente innerhalb riot.js

Question

Wenn ich einen benutzerdefinierten riot-Tag mit einem p drin wie diesem:

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

Wie greife ich auf das <p> Element aus dem <custom>-Tag?

aktualisieren: Ich habe eine ganze Menge Antworten erhalten, die Möglichkeiten sind, um es aus dem DOM zu wählen. Was ich will, ist eine Möglichkeit, den inneren Tag aus der Komponentenbibliothek riot.js selbst auszuwählen. Ich suche nach einer spezifischeren Antwort von Riotjs. Zum Beispiel mit polymer verwenden Sie this.$.content.getDistributedNodes().

Answer 1

Riot bietet nur 4 Objekte Daten aus dem aktuellen Tag zugreifen Sie sind in:

• this.opts
• this.parent
• this.root
• dies.Tags

See the API docs

bearbeiten

Außerdem können Sie direkt zugreifen named elements:

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

see the docs

bearbeiten/

Es gibt keinen direkten Verweis auf eines der Elemente, die Sie in Ihrem benutzerdefinierten Tag definiert haben. Der Rest kommt nur auf reine alte JS (die Sie vielleicht bevorzugen oder nicht).

Wie bereits erwähnt, können Sie mit dom-Methoden auf Elemente zugreifen. In einigen Fällen müssen Sie jedoch warten, bis das DOM tatsächlich geladen ist. Zum Beispiel:

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

wird nicht funktionieren, weil das DOM noch nicht fertig ist. Stattdessen wickeln Sie den Selektor in einem Hörer Ereignis 'Mount' wie folgt aus:

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

Answer 2

Haben Sie versucht:

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

getElementsByTagName eine HTML-Sammlung zurück, die Sie Abfrage weiterhin kann: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Hier ist eine schnelle und schmutzige Geige: http://jsfiddle.net/markm/m8n3huLn/

Answer 3

querySelector scheint mit benutzerdefinierten Tags zu arbeiten :

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>

Answer 4

Siehe Tag instance.

Wir können auf children zugreifen.

customTagAndLoops = this.children 

Auch zu DOM über root.

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

UPDATE - 14 Feb, 2015

children Eigenschaft wird in Riot.js v2.0.9 holt. Die einzige Möglichkeit, auf untergeordnete Elemente zuzugreifen, besteht in der Verwendung von root.

Answer 5

Wenn Sie Ihrem inneren Tag ein ID- oder Namensattribut hinzufügen, können Sie darauf über self zugreifen.

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

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

in js Teil:

self = this 

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

Geprüft Riot v2.0.10

Answer 6

Riotjs in neuesten Versionen Yielding nested HTML Funktion verfügt. See the API docs

In Ihrem Fall können Sie einfach, dass auf diese Weise tun:

In Tagdefinition:

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

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

Aus der Dokumentation

Der <yield> Tag auch einen Slot-Mechanismus bereitstellt, die Sie HTML-Inhalte auf bestimmte Slots in der Vorlage

Answer 7

Die RiotJs Cheatsheet schlägt mit Ertrag zu injizieren erlaubt wenn ich dein Dilemma richtig verstanden habe.

Haupt Tag Erklärung:

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

Kinder Tag Erklärung:

<element-child-as-container> 

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

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

</element-child-as-container> 

Haupt Umsetzung:

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

Answer 8

In Aufruhr 3.4.2 Sie ein ref-Attribut in das innere Element hinzufügen können, dass Sie ej wollen:

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

// in js 
this.refs.myP