Riot JS unmount all tags in a page and then mount only one tag is not working

Question

Riot JS unmount all tags in a page and then mount only one tag is not working

3.7k views Asked by Prabu Rajan At 20 August 2024 at 21:56

I am using Riot JS and in my index.html, I have 3 custom tags - header, login-panel and candidates-panel inside my body. In my main app.js, in the callback function of $(document).ready, I execute the current route and also register a route change handler function. In my switchView, I unmount all custom tags and then try to mount only the tag pertaining to the current view being switched. Here is my code. If I do unmount, then nothing is displayed on the page

index.html

<body>
    <header label="Hire Zen" icon="img/user-8-32.png"></header>
    <login-panel class="viewTag" id="loginView"></login-panel>

    <candidates-panel id="candidatesView" class="viewTag"></candidates-panel>
    <script src="js/bundle.js"></script>
</body>

app.js

function switchView(view) {
    if(!view || view === '') {
        view = 'login'
    }
    //unmount all other panels and mount only the panel that is required
    //TODO: unmount all view panels and mounting only required panel is not working
    //riot.unmount('.viewTag')
    riot.mount(view+'-panel')
    $('.viewTag').hide()
    $(view+'-panel').show()
}

$(document).ready(function () {
    RiotControl.addStore(new AuthStore())
    RiotControl.addStore(new CandidatesStore())
    riot.mount('header')
    //register route change handler
    riot.route(function (collection, id, action) {
        switchView(collection)
    })
    riot.route.exec(function (collection, id, action) {
        switchView(collection)
    })
})

Original Q&A

There are 3 answers

Lucas Tettamanti On 09 January 2017 at 20:35

I think you are looking for riot.util.tags.unmountAll(tags)

How to achieve the goal?

index.html

var tags = [];

some.tag.html

var some = this;
tags.push(some);

unmountAllTags.js

riot.util.tags.unmountAll(tags);

Breaker222 On 26 May 2016 at 16:28

Answer for 2.3.18

Based on the previous answer and this tutorial I have created following concept:

app.currentPage = null;

var goTo = function(page){
  if (app.currentPage) {
    app.currentPage.unmount(true); //unmount and keep parent tag
  }
  app.currentPage = riot.mount(page)[0]; //remember current page
};

riot.route(function() {
  console.info("this page is not defined");
  //do nothing (alternatively go to 404 page or home)
});

riot.route('/inventory', function(){
  goTo('inventory');
});

riot.route('/options', function() {
  goTo('options');
});

**Federico Elles** · Accepted Answer · 2015-06-17 20:09:03

Answer for riot.js v2.1.0:

The function

riot.unmount(...)

is not available as far as I know. However, you can unmount saved tags.

mytag.unmount(true)

Source

The trick is to remember the mounted tags to be able to unmount them later:

var viewTag = riot.mount(document.getElementById('viewTag'))
viewTag.unmount(true)

You can store all those view tags in an object and loop them to unmount all and mount only the active one.

Source

TechQA.

Riot JS unmount all tags in a page and then mount only one tag is not working

There are 3 answers

Related Questions in RIOT.JS

Popular Questions

Popular Tags

Trending Questions