Question

在和秘银玩耍的时候，我偶然发现了这个问题，我不确定这是一个错误或一个功能，还是我做错了什么。

请运行下面的脚本，然后点击View Two，然后点击Link three。您将看到控制台输出＆＃34; RENDER TWO＆＃34;每次点击Link three。它没有任何意义，因为在代码link组件中既未指定href也未指定oncreate: m.route.link。它就好像它从之前的路线或其他东西继承了它。此外，如果我删除onclick处理程序，一切都按预期工作（控制台不输出任何内容）。

我也在github上打开了一个问题。如果您认为可以帮助解决问题，请转到here。

无论如何，你知道发生了什么吗？

＆＃13;

const outlet = document.body;

//COMPONENTS
class Link {
  view(vnode){
    return m('a', vnode.attrs, vnode.attrs.title);
  }
}
class ViewOne {
  view(vnode){
    return m('div', 'view one');
  } 
}
class ViewTwo {
  view(vnode){
    return m('div', this.getLinkThree());
  } 
  getLinkThree(){
    return m(Link, {
      title: 'Link three',
      onclick: () => {} // removing this handler solves the problem (routerResolver's render not invoked)
    });
  }
}

//HELPERS
const getLinkOne = () => {
  return m(Link, {
    title: 'View One',
    href: '/one',
    oncreate: m.route.link
  });
}
const getLinkTwo = () => {
  return m(Link, {
    title: 'View Two',
    href: '/two',
    oncreate: m.route.link
  });
}
const getViewHolder = () => {
  return m('#view-holder');
}

//INIT
m.render(outlet, [
  getLinkOne(), 
  getLinkTwo(),
  getViewHolder()
])
m.route(document.getElementById('view-holder'), "/one", {
  "/one": {
    render: () => {
      console.log('RENDER ONE');
      return m(ViewOne);
    }
  },
  "/two": {
    render: () => {
      console.log('RENDER TWO'); //also logs when clicking on 'Link three'
      return m(ViewTwo);
    }
  }
})

＆＃13;

a {
  padding: 5px;
  background-color: grey;
  margin-right: 5px;
}
#view-holder {
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.1/mithril.min.js"></script>

＆＃13;

Answer 1

尤金，这是预期的秘银1.x行为：触发一个ui事件处理程序导致vdom build + diff。

另外，它是......不寻常......同时将m.render()和m.route()调用作为设置的一部分。在这种情况下，只需m.route()即可。请参阅此处（您需要在以下短链接前加上“https：//”）：goo.gl/z8rZFf

顺便说一句，上面的内容导致了一个名为“Flems”的编辑器 - 它将文件引用，原位代码等编码到URL中，因此共享Flems只需复制/粘贴其URL。这样做的好处是能够在不创建物理资源（如w / JSBin等）的情况下共享工作，但缺点是在大多数情况下，URL需要缩短为可共享。

路由器问题与m.route.link

1 个答案: