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

Question

我想知道是否可以执行以下操作：

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

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

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

score 5 · Accepted Answer

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

看看这个 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
}

score 2 · Accepted Answer

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

<dropdown>

    <select>...</select>

    <!-- more html code here -->

    this.mixin(Dropdown);

</dropdown>

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

希望这可以帮助。

score 0 · Accepted Answer

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

<dropdown>

    <!-- html code -->

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

</dropdown>

那么我们就可以拥有

function Dropdown(tag) {
    // constructor code
}

和

Dropdown.prototype = { ... }

照常

3 回答 3