m.route.link 的路由器问题

Question

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

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

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

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

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

Eugene，这是预期的 Mithril 1.x 行为：触发 ui 事件处理程序会导致 vdom build + diff。

另外，将 m.render() 和 m.route() 调用作为设置的一部分是...不寻常的...。在这种情况下，只需 m.route() 就足够了。请看这里（你需要在下面的短link前面加上"https://"）：goo.gl/z8rZFf

顺便说一句，上面的内容导致了一个名为 "Flems" 的编辑器——它将文件引用、现场代码等编码到 URL 中，因此只需 copy/paste 共享一个 Flems它 URL。这具有无需创建物理资源（例如 w/JSBin 等）即可共享工作的优点，但缺点是在大多数情况下 URL 需要缩短才能共享。

m.route.link 的路由器问题

Router issue with m.route.link

mithril.js