路由器问题与 m.route.link

Question

在使用秘银时，我偶然发现了这个问题，我不确定这是一个错误还是一个功能，或者我做错了什么。

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

我还在github上打开了一个问题。如果您觉得可以帮助修复它，请转到此处。

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

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

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

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

Answer 1

尤金，这是意料之中的 Mithril 1.x 行为：触发 UI 事件处理程序会导致 vdom 构建 + diff。

另外是...异常。。。在设置过程中同时进行m.render()和m.route()调用。在这种情况下，m.route()就足够了。请看这里(您需要在以下短链接前面加上"https://"(：goo.gl/z8rZFf

顺便说一句，上述内容指向一个名为"Flems"的编辑器 - 它将文件引用，原位代码等编码到URL中，因此要共享Flems，只需复制/粘贴其URL。这样做的优点是能够在不创建物理资源(如 jsbin 等(的情况下共享工作，但缺点是在大多数情况下，URL 需要缩短才能共享。