I would like to know if it is possible to do something like:

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

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

The tag would keep the view (html) while the js code stays in a different file:

• todo.tag (html/css)
• todo.js

I would like to know if it is possible to do something like:

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

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

The tag would keep the view (html) while the js code stays in a different file:

• todo.tag (html/css)
• todo.js

• javascript
• riot.js

• Why would you do that? The idea of ponents is to have one cohesive file containing everything about the ponent. – Joseph Commented Jan 13, 2016 at 1:28
• 2 One benefit that i see from separating the js code into a new file is using the live editing tool from Chrome. Otherwise, with the piler, it is not possible to do so. Besides that, which i find very very useful in frontend development, why would it hurt to separate them? Html and css are part of the view and js is the logic. It would be natural to have a .tag, .css and .js file. I don't see why Riot wouldn't allow this. – Fernando Gabrieli Commented Jan 13, 2016 at 1:44
• @FernandoGabrieli, I haven't actually verified how this works, but came across this post, maybe useful: github./riot/riot/issues/552 – gxc Commented Jan 13, 2016 at 10:40
• 1 I don't think it's possible to do so. But for development workflow, we use separate html and js/coffee files ; with the tag files being generated at build time. – Antoine Commented Jan 14, 2016 at 10:16

3 Answers 3

To give an alternative to the mixin solution, here is another way of splitting up your markup from your logic.

Take a look at this Plunker (a colleague of mine wrote this). The key part is the way you reference the tag function. <script>todoTag.call(this, this.opts);</script>. In this case, the todoTag is a global function. But nothing stops you from name spacing that function or use some form of module loading.

From the plunker:

todo.tag.html:

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

todo.tag.js:

function todoTag(opts) {
    // your logic
}

After looking into it i found that it is possible to separate the js from the tag file by using mixins. So, we would have something like:

<dropdown>

    <select>...</select>

    <!-- more html code here -->

    this.mixin(Dropdown);

</dropdown>

The Dropdown instance will be in dropdown.js and the tag in dropdown.tag.

Hope this helps.

I've found another option to separate the js code from the tag by using a regular js constructor, like this:

<dropdown>

    <!-- html code -->

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

</dropdown>

then we can just have

function Dropdown(tag) {
    // constructor code
}

and

Dropdown.prototype = { ... }

as usual