没有页面重新加载的 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 *" 事件可能会阻止路由器拦截对 link.

的点击

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

编辑以下问题版本 2：

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

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

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

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

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

原回答：

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

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

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

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

没有页面重新加载的 FlowRouter

FlowRouter without page reload

meteor

meteor-blaze

flow-router