无需重新加载页面的 FlowRouter

Question

我正在关注这个例子https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates 当我点击我的链接时，整个页面正在重新加载。有没有办法只加载需要的模板部分而不是整个页面？

编辑：我还注意到另一个问题。 {{> Template.dynamic}} 之外的所有内容都被渲染了两次。

这是我的项目示例。 https://github.com/hayk94/UbMvp/tree/routing

编辑：将内容放入 mainLayout 模板并从那里开始渲染修复了双重渲染问题。但是由于此代码而发生重新加载问题

Template.mainLayout.events({
  "click *": function(event, template){
     event.stopPropagation();
     console.log('body all click log');
    //  console.log(c0nnIp);
     var clickedOne = $(event.target).html().toString();
     console.log('This click ' + clickedOne);
     //getting the connID

    var clientIp = null // headers.getClientIP(); // no need for this anymore
    var clientConnId = Meteor.connection._lastSessionId;
    console.log(clientIp);
    console.log(clientConnId);



    Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
      if(error){
        console.log("error", error);
      }
      if(result){

      }
    });

  }, // click *
});//events

如果没有将此事件附加到模板，则路由可以在没有任何重新加载的情况下工作，但是一旦我附加它，问题仍然存在。 你知道为什么这段代码会导致这样的问题吗？

Answer 1

编辑 2 以下问题修订版 3：

event.stopPropagation() on "click *" 事件可能会阻止路由器拦截点击链接。

然后您的浏览器执行默认行为，即导航到该链接，重新加载整个页面。

---

编辑以下问题 Rev 2：

不确定是否可以直接使用 body 作为 BlazeLayout 目标布局。

注意BlazeLayout Usage 的第一个代码示例中，他们使用实际模板作为布局 (<template name="layout1">)，在 JS 中定位为 BlazeLayout.render('layout1', {});。

在你提到的教程中，他们同样使用<template name="mainLayout">。

然后，该布局模板将附加到您的页面正文并进行相应填充。顺便说一句，您还可以使用BlazeLayout.setRoot() 更改该布局的占位符。

但是如果您尝试直接针对body，可能会发生奇怪的事情？特别是，这可以解释为什么您的内容会呈现两次。

---

原答案：

如果您的页面实际上被重新加载，那么您的路由器可能没有正确配置，因为您的链接没有被截获并且您的浏览器实际上使您导航到该页面。在这种情况下，如果您需要进一步的帮助，我们将需要查看您的实际代码。

如果您的页面实际上并未重新加载，而只是更改了整个内容（而您只想更改其中的一部分），那么您应该确保正确指向动态模板。

您可以参考kadira:blaze-layout 包文档，了解如何在布局中设置不同的动态模板目标，以及如何单独更改每个（或同时更改多个）。

如果你使用 kadira:react-layout 包，你应该有类似的东西。