当路线改变时,秘银组件不会更新

时间:2017-02-15 22:09:23

标签: javascript routing single-page-application mithril.js

我使用Mithril.js创建我的个人网站/博客作为单页应用程序。我网站上的所有网页和博客帖子均使用PagePost组件呈现,并根据网址中的:slug加载正确的网页。

我遇到的问题是每当我尝试在页面之间切换时,页面内容都不会更新。在页面和帖子之间切换是有效的,因为我在PagePost组件之间交替。但是,当我尝试连续两次使用相同的组件时,从页面到页面,它不会更新网页。

m.route(document.body, '/', {
  // `Home` is a wrapper around `Page`
  // so I can route to `/` instead of `/home`
  '/': Home,
  '/:slug': Page,
  '/blog/:slug': Post
});
const Home = {
  view() {
    return m(Page, { slug: 'home' });
  }
};

以下是Page组件(Post组件非常相似)。两个组件都能正确呈现。

const Page = {
  content: {},
  oninit(vnode) {
    m.request({
      method: 'GET',
      url: 'content.json',
    }).then((response) => {
      Page.content = response.pages[vnode.attrs.slug];
    });
  },
  view() {
    if (Page.content) {
      return [
        m('#content', m.trust(Page.content.body))
      ];
    }
  }
};

为什么秘银不会认识到这个小块改变了?

1 个答案:

答案 0 :(得分:1)

docs page for m.route为您提供解决方案。

  

当用户从参数化路线导航到具有不同参数的相同路线时(例如,在给定路线/page/1的情况下从/page/2/page/:id,将不会从因为两个路由都解析为同一个组件,因此导致虚拟dom就地差异。这会产生触发onupdate挂钩的副作用,而不是oninit / {{1}但是,对于开发人员来说,想要将组件的重新创建与路由更改事件同步是相对常见的。