如何通过JS将riot标记附加到根

How can I append riot tag to the root through JS?

本文关键字：何通过 JS riot      更新时间：2023-09-26

我有以下代码：

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

如果我在没有JS的情况下添加它，它会起作用：

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

如何使用javascript实现此功能？标记被添加到DOM中；但是，它不会更新。

编辑：小改动。

我认为您的解决方案的问题是Riot没有通过JavaScript将插入的HTML解析为Riot标记。一种不同的方法可以更好地工作，例如：

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

另一种方法可能是使用riot-tag属性（我还没有测试过，但它应该可以工作）：

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

编辑：似乎riot-tag在不久的将来会被弃用，但该解决方案仍然可以使用data-is：http://riotjs.com/guide/#html-元素作为标记（遗憾的是，关于这方面的适当文档似乎很少）。

相关文章：