Question

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

编辑：我还注意到另一个问题。外面的一切{{＆gt; 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()事件上的

"click *"可能会阻止路由器拦截链接上的点击。

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

编辑以下问题第2版：

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

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

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

然后将该布局模板附加到您网页的正文并相应填写。您还可以使用BlazeLayout.setRoot()更改该布局的占位符。

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

原始答案：

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

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

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

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

没有页面重新加载的FlowRouter

1 个答案: