没有页面重新加载的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

在问题修订版3之后编辑2 ：

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

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

---

编辑问题2：

不确定您可以直接将您的body用作BlazeLayout目标布局。

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

在您提到的教程中，它们类似地使用<template name="mainLayout"> 。

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

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

---

原始答案：

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

如果您的页面实际上没有被重新加载，而仅更改了整个内容（而您只想更改其中的一部分），则应确保正确指向动态模板。

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

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