是否可以將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解決方案，下面是將標記與邏輯分開的另一種方法。

看看這個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中的標記位於dropdown.js中。

希望這可以幫助。

Answer 3

我找到了另一個選項，通過使用常規的js構造函數將js代碼與標記分開，如下所示：

<dropdown>

    <!-- html code -->

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

</dropdown>

那我們就可以了

function Dropdown(tag) {
    // constructor code
}

和

Dropdown.prototype = { ... }

照常