Is it possible to separate the javascript code from the tag file in Riot Js?

Question

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

Why would you do that? The idea of components is to have one cohesive file containing everything about the component. — Joseph, Jan 13 '16 at 01:28
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 compiler, 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, Jan 13 '16 at 01:44
@FernandoGabrieli, I haven't actually verified how this works, but came across this post, maybe useful: https://github.com/riot/riot/issues/552 — gxc, Jan 13 '16 at 10:40
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, Jan 14 '16 at 10:16

score 5 · Accepted Answer · answered Mar 10 '16 at 12:31

5

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
}

answered Mar 10 '16 at 12:31

Peter Goes

459
4
12

Peter Goes thanks a lot for taking the time to write the plunker. I like this solution too. Probably better than mixins so we don't involve Riot too much. – Fernando Gabrieli Mar 10 '16 at 16:03
To be fair, I did not write the plunker. My colleague did :) We had an internal discussion at our company regarding this issue, and he wrote this plunker to demonstrate the possibility. So credits go to [jbmoelker](https://twitter.com/jbmoelker). – Peter Goes Mar 10 '16 at 16:26
Thanks for sharing guys then – Fernando Gabrieli Mar 10 '16 at 20:11

score 2 · Answer 2 · answered Jan 15 '16 at 20:52

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.

score 0 · Answer 3 · answered Mar 09 '17 at 20:08

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

Is it possible to separate the javascript code from the tag file in Riot Js?

3 Answers3