是否可以将Javascript代码与Riot Js中的标记文件分开？

Question

我想知道是否可以做类似的事情：

<todo>
    <div class="greetings">Hello, world!</div>

    <script src="/path/to/my/file.js"></script>
</todo>

当js代码保留在不同的文件中时，标记将保留视图（html）：

• todo.tag（html / css）
• todo.js

Answer 1

为了替代mixin解决方案，下面是将标记与逻辑分开的另一种方法。

看看this Plunker（我的一位同事写了这篇文章）。关键部分是引用标记功能的方式。 <script>todoTag.call(this, this.opts);</script>。在这种情况下，todoTag是一个全局函数。但是没有什么可以阻止你使用名称间距或使用某种形式的模块加载。

来自plunker：

todo.tag.html：

<todo>
    <!-- your markup -->
    <script>todoTag.call(this, this.opts);</script>
</todo>

todo.tag.js：

function todoTag(opts) {
    // your logic
}

Answer 2

在查看之后，我发现可以使用mixins将js与标记文件分开。所以，我们会有类似的东西：

<dropdown>

    <select>...</select>

    <!-- more html code here -->

    this.mixin(Dropdown);

</dropdown>

Dropdown实例将位于dropdown.js中，而标签位于dropdown.tag。

希望这会有所帮助。

Answer 3

我找到了另一个选项，通过使用常规的js构造函数将js代码与标记分开，如下所示：

<dropdown>

    <!-- html code -->

    <script>new Dropdown(this)</script>

</dropdown>

然后我们就可以了

function Dropdown(tag) {
    // constructor code
}

和

Dropdown.prototype = { ... }

像往常一样