javascript - Ractive 创建重复的 "ghost"组件，但不显示或调用生命周期事件

Question

我对这个已经束手无策了。

本质上，Ractive 是创建一个组件的两个实例，但只调用其中一个的 oninit —— 实际上不在 DOM 中的那个。这发生在导航到不同的“页面”(main.set('page', 'somepage')) 然后导航回上一页之后。

主要的 ractive 实例非常简单:

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;
    },
  },
});

及其模板:

{{> navigation}}

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

{{> footer}}

我尝试在 Plunkr 中复制它，但没有成功。相反，我将调试器语句添加到实时的、未压缩的版本中。

编辑:删除了实时版本

它发生在导航回索引页之后。打开控制台。单击右上角的“登录”按钮，然后单击 Logo 返回索引。有源映射，感兴趣的文件是 homepage.js(被“重影”的组件)和 router.js(主要的 ractive 实例所在的地方)。

Answer 1

看起来路由器正在从注册路由的第一个组件调用注册函数:

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();
    ...            

page.js好像没有注销的概念。一种选择是将路由注册移动到根组件并路由到子组件:

// 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){
    ...
},