Question

好的，这真的很奇怪。不幸的是，我无法显示大量代码，因为我真的不知道问题的起源 - 但是，我可以描述问题。那说，如果有＆＃39;您认为相关的一些代码，请询问，我会发布它！所以，这里是：

我有一个HTML模板（找到here），我将其切入Blaze模板，以便集成到我正在使用Meteor的房地产网站中。该模板包括我所包含的所有这些外部CSS和JavaScript文件，只需将模板保持原样并将模板所需的所有资产放入Meteor项目的/public文件夹中。这些文件是通过<script>中嵌入的常规<link>和<head>元素以及主布局底部附近加载的。

以下是我<head>的样子：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Real Places</title>
    <link rel="icon" href="images/cropped-ms-icon-310x310-32x32.png" sizes="32x32" />
    <link rel="icon" href="images/cropped-ms-icon-310x310-192x192.png" sizes="192x192" />
    <link rel="apple-touch-icon-precomposed" href="images/cropped-ms-icon-310x310-180x180.png">
    <!-- Google font-->
    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Dosis:400,700,600,500' rel='stylesheet' type='text/css'>
    <!-- Include the flexslider stylesheet -->
    <link href="js/flexslider/flexslider.css" rel="stylesheet">
    <!-- Include the lightslider stylesheet -->
    <link href="js/lightslider/css/lightslider.min.css" rel="stylesheet">
    <!-- Include the owl-carousel stylesheet -->
    <link href="js/owl.carousel/owl.carousel.css" rel="stylesheet">
    <!-- Include the swipebox stylesheet -->
    <link href="js/swipebox/css/swipebox.min.css" rel="stylesheet">
    <!-- Include the select2 stylesheet -->
    <link href="js/select2/select2.css" rel="stylesheet">
    <!-- Include the font-awesome stylesheet -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Include the select2 stylesheet -->
    <link href="css/animate.css" rel="stylesheet">
    <link href="js/magnific-popup/magnific-popup.css" rel="stylesheet">
    <!-- Main stylesheet -->
    <link rel="stylesheet" href="css/main.css"/>
    <!-- Default Theme stylesheet -->
    <link rel="stylesheet" href="css/theme.css"/>
</head>

以下是我的主要布局：

<template name="app_home"> <!-- note this is distinct from site_home, which is a different template -->
  <body class="inspiry-slider-two">
    {{> page_loader}}
    {{> mobile_header}}
    {{> site_header}}
    {{> Template.dynamic template=main}}
    {{> site_footer}}
    {{> login_modal}}
    {{> real_places_includes}}
  </body>
</template>

模板所依赖的所有脚本都是通过real_places_includes模板调用插入的。以下是此模板的外观：

<template name="real_places_includes">
  <script src="js/jquery-1.12.3.min.js"></script>
  <script src="js/flexslider/jquery.flexslider-min.js"></script>
  <script src="js/lightslider/js/lightslider.min.js"></script>
  <script src="js/select2/select2.min.js"></script>
  <script src="js/owl.carousel/owl.carousel.min.js"></script>
  <script src="js/swipebox/js/jquery.swipebox.min.js"></script>
  <script src="js/jquery.hoverIntent.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script src="js/jquery.form.js"></script>
  <script src="js/transition.js"></script>
  <script src="js/jquery.appear.js"></script>
  <script src="js/modal.js"></script>
  <script src="js/meanmenu/jquery.meanmenu.min.js"></script>
  <script src="js/jquery.placeholder.min.js"></script>
  <script src="js/custom.js"></script>
  <!-- .modal -->
  <script>
     ...
     // This is a bunch of modal code specific to the template
     ...
  </script>
</template>

当页面首次加载时，这种方法很有效，但是当我离开主页并返回时，看起来好像资产在我回来时没有正确加载。以下是一些相关的路由代码：

FlowRouter.route('/', {
  name: 'Site.home',
  action() {
    BlazeLayout.render('app_home', { main: 'site_home' });
  }
});

FlowRouter.notFound = {
  action() {
    BlazeLayout.render('app_home', { main: 'site_not_found' });
  }
};

现在，模板中的几乎所有链接都无法正常工作，因为我还没有将它们换成“现场直播”。 {{pathFor 'route'}}来电。所以，如果我说，点击其中一个链接，我就会得到404页面。它看起来加载得很好。在404页面上，我添加了{{pathFor 'Site.home'}}以将用户导航回主页面。但是，当您单击它时，依赖于JavaScript的主页上的所有页面元素（之前加载的页面元素都很好！）似乎无法正确格式化。我检查了Chrome调试器以找到它。但是，根据Chrome的资源检查员，所有资产仍然可以正确加载！

这是最初页面和回到家中后的页面：
在路由之前
路由后
正如您所看到的，选择框尚未正确呈现，导航栏下方页面顶部的滑块也不会呈现并显示动画加载图形...基本上任何依赖于JavaScript是kaput。

以下是调试器的几个屏幕截图，突出显示了问题：
在路由之前
路由后
这就是同样的位置＆＃39;选择看起来像使用我的路线之前和之后。

所以，无论出于何种原因，当我点击某条路线时，路线所依赖的代码似乎没有按原样执行，以便格式化页面，因为如果路线被击中时，它原来是HOWEVER该网站首次加载，它执行得很好...我觉得我需要手动发射一些全球事件或类似的东西，但我真的不知道什么...或者可能完全不同。我尝试在'load'回调上手动触发'ready'和Template.site_home.onRendered个事件，但这并没有奏效。

有没有人知道如何解决这个问题并使页面转换正确？

Meteor：动态页面未正常转换

0 个答案: