Wie kann ich Riot Tag an die Wurzel durch JS anhängen?

Question

Ich habe den folgenden Code:

<my-tag> 

    <script> 
     var self = this; 
     riot.route('/test', function() { 
      self.root.innerHTML = '<some-riot-tag></some-riot-tag>'; 
      self.update(); 
     }); 
    </script> 
</my-tag> 

Wenn ich es ohne JS hinzufügen, funktioniert es:

<my-tag> 
    <some-riot-tag></some-riot-tag> 
</my-tag> 

Wie kann ich diese Arbeit zu machen mit Hilfe von Javascript? Das Tag wird dem DOM hinzugefügt. es wird jedoch nicht aktualisiert.

EDIT: kleine Änderungen.

Answer 1

Ich denke, das Problem mit Ihrer Lösung ist, dass Riot das eingefügte HTML über JavaScript nicht als Riot-Tag analysiert. Ein anderer Ansatz könnte besser funktionieren, zum Beispiel:

<my-tag> 
    <some-riot-tag if="{ route == 'test' }" /> 
    <other-riot-tag if="{ route == 'bar' }" /> 

    <script> 
     var self = this; 
     riot.route('/test', function() { 
      self.route = 'foo'; 
      self.update(); 
     }); 
     riot.route('/bar', function() { 
      self.route = 'bar'; 
      self.update(); 
     }); 
    </script> 
</my-tag> 

Ein anderer Ansatz könnte das riot-tag Attribut (ich dies nicht getestet, aber es sollte funktionieren) werden:

<my-tag> 

    <div riot-tag="{ tagName }"></div> 

    <script> 
     var self = this; 
     riot.route('/test', function() { 
      self.tagName = 'some-riot-tag'; 
      self.update(); 
     }); 
     riot.route('/bar', function() { 
      self.tagName = 'other-riot-tag'; 
      self.update(); 
     }); 
    </script> 
</my-tag> 

bearbeiten: scheint wie riot-tag wird in der (nahen) Zukunft veraltet sein, aber die Lösung könnte immer noch arbeiten mit data-is: http://riotjs.com/guide/#html-elements-as-tags (leider, die richtige Dokumentation zu diesem scheint spärlich sein).