Question

我正在使用基于Polymer的PSK (Polymer Starter Kit)（＆gt; = 1.2.0）构建网站。

我试图集中和/或自动化我的路由器配置时遇到（可能是noob）问题。

我已将以下代码添加到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-loop而不是硬代码时，它会中断：

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

debug 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＆amp; JS]，但这是我第一次创建一个网站，并将这些知识用于项目中，而不是用于练习/学习 - 分配）

Answer 1

我的第一个猜测是确定范围。看看下面的例子（输出到控制台）。尝试在匿名回调函数中的/bucket-name/上执行console.log。我希望他们可能不是你认为的那样。

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

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

＆＃13;

我将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);中的i更改为pass()，因为它实际上是副本。您可以在那里使用v，但这是为了表明它是副本而不是相同的参考。

for-loop

1 个答案: