我正在尝试构建一个地图选择,只允许您在做出选择时输入URL

时间:2014-10-30 18:14:52

标签: javascript meteor iron-router

我正在使用流星和铁路由器,大部分工作正常,我在访问/精神时已成功将页面重定向回到主页,但是我希望重定向在地图上进行选择时停止工作。

我可能没有正确接近这个。您将在下面的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点击功能放到哪里工作,当我访问/精神时我得到新代码下面的错误。除非您对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'] });

错误

Exception from Tracker recompute function: undefined is not a function
TypeError: undefined is not a function
    at Router.onBeforeAction.only (http://localhost:3000/lib/router.js?4e5fa4c0e6dac39de81308142d50f13543d19152:26:14)
    at RouteController.runHooks (http://localhost:3000/packages/iron_router.js?da7f2ac81c3fd9daebf49ce9a6980a54caa1dc17:843:16)
    at http://localhost:3000/packages/iron_router.js?da7f2ac81c3fd9daebf49ce9a6980a54caa1dc17:2302:14
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at Tracker.Computation._recompute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:302:14)
    at Tracker.flush (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:430:14) 

UPDATE NUMERO TWO

我有一个半工作的例子和路由器代码,就像我期待的那样。我唯一的问题是当访问/精神刷新重定向你时,我希望浏览器会话记住用户点击链接并在第一次点击后允许查看页面antytime。

您可以访问网站here了解我的意思。

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);
    }
  });
}

1 个答案:

答案 0 :(得分:1)

是的,您应该重写该代码以充分利用Iron Router onBeforeAction。

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

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'] });

在你的卑诗省活动中你应该做的事情如下:

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

这应该为您指明如何构建路由。

<强>更新

我已将您的问题简化为一个例子。试试这个:

流星试验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>

流星试验map.js

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();
  });
}