在 for 循环中路由不起作用

Question

我正在使用 Polymer (>= 1.2.0) based on the PSK (Polymer Starter Kit) 构建网站。

我运行遇到了一个（可能是菜鸟）问题，试图集中 and/or 自动化我的路由器配置。

我已将以下代码附加到 PSK 的 app.js 文件的末尾：

//note: app.baseUrl is set by PSK's original code earlier in the file: app.baseUrl = '/';
app.routeMap = [
  {name: "home", text: "Home", icon: "home", url: app.baseUrl},
  {name: "about", text: "About", icon: "face", url: app.baseUrl + "about"},
  {name: "portfolio", text: "Portfolio", icon: "build", url: app.baseUrl + "portfolio"},
  {name: "contact", text: "Contact", icon: "mail", url: app.baseUrl + "contact"}
];

然后我将 routing.html 中的原始路由配置代码替换为使用 routeMap:

的新版本

page('*', scrollToTop, closeDrawer, function (ctx, next) {
  next();
});

page('/', function () {
  app.route = app.routeMap[0].name;
});

page(app.routeMap[0].url, function () {
  app.route = app.routeMap[0].name;
});

page(app.routeMap[1].url, function () {
  app.route = app.routeMap[1].name;
});

page(app.routeMap[2].url, function () {
  app.route = app.routeMap[2].name;
});

page(app.routeMap[3].url, function () {
  app.route = app.routeMap[3].name;
});

//404
page('*', function () {
  app.$.toast.text = 'Can\'t find: ' + window.location.href + '. Redirected you to Home Page';
  app.$.toast.show();
  page.redirect(app.baseUrl);
});

以上代码运行良好！但是当我尝试使用 for 循环而不是硬编码时它会中断：

page('*', scrollToTop, closeDrawer, function (ctx, next) {
  next();
});

page('/', function () {
  app.route = app.routeMap[0].name;
});

//Doesn't work with this for-loop...
for (i = 0; i < app.routeMap.length; i++) {
  //debug
  console.log("Registering route: " + i + " - Name: " + app.routeMap[i].name + " - URL: " + app.routeMap[i].url);
  page(app.routeMap[i].url, function () {
    app.route = app.routeMap[i].name;
  });
}

//404
page('*', function () {
  app.$.toast.text = 'Can\'t find: ' + window.location.href + '. Redirected you to Home Page';
  app.$.toast.show();
  page.redirect(app.baseUrl);
});

调试 console.log() 按预期打印 routeMap 的项目，但路由不起作用（page(app.routeMap[i].url, function () { /*...*/ }); 部分不起作用？），我得到一个 Uncaught TypeError: Cannot read property 'name' of undefined位于at (anonymous function) (app/elements/routing.html:86:36)

谁能找出这里的问题？它可能是一个菜鸟，但它直接飞过我的头顶...

([HTML, CSS & JS]([HTML, CSS & JS](CSS & JS]我懂一点，但这是我第一次做网站，把这些知识用在项目中) , 而不是 exercise/learning-assignment)

Answer 1

我的第一个猜测是范围界定。看看下面的示例（输出到控制台）。尝试在匿名回调函数中对 i 执行 console.log。我想他们可能不是你想的那样。

我的期望是你的 i 数组的长度在用作索引时超出范围（因为索引从 0 开始）。

我在下面创建了一些代码来展示回调的范围如何影响您的预期。基本上，回调的范围与您创建匿名函数的范围不同（因为它是稍后调用的）。

var a = [11, 22, 33, 44, 55, 66];

function pass(arr) {
  for (var i = 0; i < arr.length; i++) {
    setTimeout(function(v) {   // This function returns a function with a copy of a current iterator value (non-object type)
      return function() {
        console.log("I am in pass: i=" + v);
      }
    }(i), 0)
  }
}

function noCB(arr) {
  for (var i = 0; i < arr.length; i++) {
    console.log("I am NOT in cb: i=" + i); // This is actually executed here
  }
}

function fail(arr) {
  for (var i = 0; i < arr.length; i++) {
    setTimeout(function() {               // This function is define but not run here
      console.log("I am in fail: i=" + i)  // The i here is the same as the i being iterated with the for loop.
    }, 0)                                  // This value will be looked at AFTER the loop is completed when the callback is called later
  }
}


fail(a);
noCB(a);
pass(a);

我将 pass() 中的 i 更改为 v，因为它实际上是一个副本。您可以在那里使用 i，但这表明它是一个副本，而不是相同的引用。

在 for 循环中路由不起作用

Routing doesn't work when in for-loop

javascript

debugging

for-loop

polymer-1.0