Javascript 我试图建立一个地图选择，只有让你输入一个网址时，作出选择

我使用的是Meteor和Iron路由器，大多数东西都能正常工作，我已经成功地在访问/spirit时将页面重定向回主页，但是当在地图上做出选择时，我希望重定向停止工作

我可能没有正确处理这个问题。您将在下面的BC1单击功能中看到我希望发生的事情

下面是我的MAP.js代码

function map(){
  Template.map.rendered = function(){
    var s = Snap("#map");

  //  var snap = Snap(912,912);






    Snap.load("/map.svg", function (f) {

      var el = f.select("path#Fill-65");//Alberta

      var BC = f.selectAll("path#Fill-112 , path#Fill-94");// All BC

      var BC1 = f.select("path#Fill-112");// BC 1

      var BC2 = f.select("path#Fill-94");//BC 2

      var SK = f.select("path#Fill-114");//Saskatchewan

      var MB = f.select("path#Fill-117");//MANITOBA

      var QB = f.select("path#Fill-116");//QUEBEC

      var ON = f.select("path#Fill-120");//ONTARIO

      var T1 = f.select("path#Fill-115");//T1








      var filterMap = s.paper.filter(Snap.filter.shadow(-2, 0, 3, '#000', '0.5'));

      var filterMapNone = s.paper.filter(Snap.filter.shadow(0, 0, 0));

      BC1.hover(function(){
        allBcOn();
      }, function() {
        allBcOff();
      });


      BC1 .click(function(){
        alert("Enter You West Coaster");
        enter = "false";
        /////SEND TO NEXT PAGE//////
      });


      function allBcOn(){
        BC.forEach( function(elem,i) {
           elem.animate({fill: "#fff"},500);
           elem.attr({filter: filterMap });
        });
      }

      function allBcOff(){
        BC.forEach( function(elem,i) {
           elem.animate({fill: "#C2C2C2"},500);
           elem.attr({filter: undefined });
        });
      }




      el.hover(function(){
        //el.attr({fill: "#000"});
        el.animate({fill: "#fff"},500);
        el.attr({filter: filterMap });
      }, function() {
         el.attr({filter: undefined });
         el.animate({fill: "#C2C2C2"},500);

      });

      SK.hover(function(){
        //el.attr({fill: "#000"});
        SK.animate({fill: "#fff"},500);
        SK.attr({filter: filterMap });
      }, function() {
         SK.attr({filter: undefined });
         SK.animate({fill: "#C2C2C2"},500);

      });

      MB.hover(function(){
        //el.attr({fill: "#000"});
        MB.animate({fill: "#fff"},500);
        MB.attr({filter: filterMap });
      }, function() {
         MB.attr({filter: undefined });
         MB.animate({fill: "#C2C2C2"},500);

      });

      QB.hover(function(){
        //el.attr({fill: "#000"});
        QB.animate({fill: "#fff"},500);
        QB.attr({filter: filterMap });
      }, function() {
         QB.attr({filter: undefined });
         QB.animate({fill: "#C2C2C2"},500);

      });

      ON.hover(function(){
        //el.attr({fill: "#000"});
        ON.animate({fill: "#fff"},500);
        ON.attr({filter: filterMap });
      }, function() {
         ON.attr({filter: undefined });
         ON.animate({fill: "#C2C2C2"},500);

      });

      T1.hover(function(){
        //el.attr({fill: "#000"});
        T1.animate({fill: "#fff"},500);
        T1.attr({filter: filterMap });
      }, function() {
         T1.attr({filter: undefined });
         T1.animate({fill: "#C2C2C2"},500);

      });

      g = f.select("g");

      s.append(g);


    });
  }

**

更新

**

这是我的新代码。铁制路由器。我不知道在哪里放置map.js click函数才能让它工作，当我访问/spirit时，我在新代码下面看到了错误。除非您在bcClick上执行了单击操作，否则/sprit页面应将您发送回主页

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',

  waitOn: function() { return Meteor.subscribe('posts'); }
});

Router.map(function() {
  this.route('home', {path: '/'});
  this.route('postsList', {path: '/spirit'});
  this.route('postPage', {
    path: '/spirit/:_id',
    data: function() { return Posts.findOne(this.params._id); }
  });
  this.route('login', {path: '/login'});
});


Router.onBeforeAction('loading');
Router.onBeforeAction('dataNotFound', {only: 'postPage'}); //Show all data when post ID is oncorrect in URL
Router.onBeforeAction(function() {
    if (Session.get("enter") === true) {
        this.render('home');
    } else {
        this.next();
    }
}, { only: ['postsList'] });

错误

更新第二条

我有一个半工作的例子和路由器代码的方式，我期待。我唯一的问题是当访问/spirit a refresh重定向您时，我希望浏览器会话记住用户单击链接的时间，并允许在第一次单击后立即查看页面

你可以访问这个网站来了解我的意思

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',

  waitOn: function() { return Meteor.subscribe('posts'); }
});

Router.map(function() {
  this.route('homePage', {path: '/'});
  this.route('postsList', {path: '/spirit'});
  this.route('postPage', {
    path: '/spirit/:_id',
    data: function() { return Posts.findOne(this.params._id); }
  });
  this.route('login', {path: '/login'});
  this.route('landing', {path: '/landing'});
});

Router.onBeforeAction('loading');
Router.onBeforeAction('dataNotFound', {only: 'postPage'}); //Show all data when post ID is oncorrect in URL
Router.onBeforeAction(function(){


  var enter = Session.get("enter");
  if (typeof enter != "undefined" && enter === true) {
    alert("welcome");
    this.render('postsList')
  } else {
    this.redirect('homePage');

  }


}, {only: 'postsList'}); //Show all data when post ID is oncorrect in URL

if (Meteor.isClient) {
  // counter starts at 0
  //Session.setDefault("counter", 0);

  Template.homePage.events({
    'click a': function () {
      // increment the counter when button is clicked
      Session.set("enter", true);
    }
  });
}

---

是的，在采取行动之前，您应该重写该代码以充分利用Iron Router

下面是一些您可能希望用作参考的示例代码。不过我还没有测试过。以下是路由器的相关部分：

Router.route('/', function() {
    this.render('home');
});

Router.route('/spirit', function() {
    this.render('postsList');
});

Router.onBeforeAction(function() {
    if (Session.get("enter") === true) {
        this.render('home');
    } else {
        this.next();
    }
}, { only: ['postsList'] });

在BC活动中，您应该做如下操作：

BC1 .click(function(){
    alert("Enter You West Coaster");
    Session.set('enter', false);
    /////SEND TO NEXT PAGE//////
});

这将为您提供一个如何构造路由的指针

更新

我已经把你的问题简化为一个例子。试试这个：

meteor-test-map.html

<head>
  <title>meteor-test-map</title>
</head>

<body>
</body>

<template name="layout">
Main layout
  {{> yield}}
</template>

<template name="postsList">
Posts list
<button>Click Me</button>
</template>

<template name="spirit">
Spirit
</template>

<template name="home">
Home
</template>

<template name="loading">
Loading
</template>

---

据我所知，您的“enter”变量是在全局和本地命名空间中定义的，因此您的更改不会反映出来。您对我可以做什么有什么建议吗？我如何处理全局和本地命名空间。BC1click事件是accesbile iron router？我想我应该如何在if语句之前运行map脚本？对不起，我现在更糊涂了。我正在尝试让主页具有click事件处理程序，然后将您带到位于/spirit的postsList模板。我不知道为什么postsList模板上会有一个按钮，当我访问/spirit时，它应该会将你重定向到家中，我仍然会遇到上面提到的相同错误。我将选择你的答案，因为我已经学会了很多使用它的方法。谢谢仅供参考，我尝试了一个更简单的解决方案，但仍然有一个小问题，您可以在这里查看

<head>
  <title>meteor-test-map</title>
</head>

<body>
</body>

<template name="layout">
Main layout
  {{> yield}}
</template>

<template name="postsList">
Posts list
<button>Click Me</button>
</template>

<template name="spirit">
Spirit
</template>

<template name="home">
Home
</template>

<template name="loading">
Loading
</template>

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
  notFoundTemplate: 'notFound',

  waitOn: function() { return Meteor.subscribe('posts'); }
});

Router.map(function() {
  this.route('home', {path: '/'});
  this.route('postsList', {path: '/spirit'});
  this.route('postPage', {
    path: '/spirit/:_id',
    data: function() { return Posts.findOne(this.params._id); }
  });
  this.route('login', {path: '/login'});
});

Router.onBeforeAction('loading');
Router.onBeforeAction('dataNotFound', {only: 'postPage'}); //Show all data when post ID is oncorrect in URL

Router.onBeforeAction(function() {
    var enter = Session.get("enter");
    if (typeof enter != "undefined" && enter === true) {
        this.render('home');
    } else {
        this.next();
    }
}, { only: ['postsList'] });


Posts = new Meteor.Collection("posts");

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault("counter", 0);

  Template.postsList.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set("enter", true);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });

  Meteor.publish("posts", function() {
    return Posts.find();
  });
}