Ractive creating duplicate "ghost" components, but not displaying or calling lifecycle events

Question

I'm at my wit's end with this one.

Essentially Ractive is creating two instances of a component, but only calling oninit of one of them — the one that isn't actually in the DOM. This happens after navigating to a different "page" (main.set('page', 'somepage')) and then navigating back to the previous page.

The main ractive instance is pretty simple:

var main = new Ractive({
  el: 'main',
  template: require('templates/main'),
  partials: partials,
  components: { ... },
  data: {
    loading: true,
    page: 'loading',
    component: function(name){
        if (!!this.partials[name]) return name;
        this.partials[name] = '<' + name + '/>';
        return name;
    },
  },
});

and itss template:

{{> navigation}}

<div id='page'>
    {{> component(page) }}
</div>

{{> footer}}

I tried reproducing this in a Plunkr, but was unsuccessful. Instead, I added debugger statements to a live, unminfied version.

edit: Live version removed

It happens after navigating back to the index page. Open the console. Click on the 'login' button in the top right, then click on the logo to go back to the index. There are source maps, files of interest are homepage.js (the component that is being 'ghosted') and router.js (where the main ractive instance is).

Answer 1

It looks like the router is calling the registered function from the first component that registered the route:

oninit: function() {

    // self out here has new guid 
    var self = this;

    route('/', getFeatured, getTrending);

    function getFeatured(context, next) {
        // self in here has "r-1"
        next();
    ...            

It doesn't seem page.js has the concept of unregistering. One option is to move the route registration to the root component and route to the child component:

// in root:
route('/', function(){ 
    this.findComponent('homepage').getFeatured()
}, function(){ 
    this.findComponent('homepage').getTrending()
}

// in homepage component, add as methods:
getFeatured: function(context, next){
    ...
},
getTrending: function(context, next){
    ...
},