0

我正在使用瓶子框架来动态列出用于编辑任务的链接，行是逻辑上具有多个（id、任务、状态）的元组的集合，下面的代码应该给出第一个链接

http://localhost:8217/edit/1

第二个链接

http://localhost:8217/edit/2

如此反复

但所有的链接都是

http://localhost:8217/edit/5

因此我怀疑这与代码的执行顺序有关，任何提示将不胜感激

<p>The open items are as follows:</p>
<table border="1">
%for row in rows:
    <tr>
    %for col in row:
        <td>{{col}}</td>   
    %end
    <script language="javascript">
        var number = "http://localhost:8217/edit/";
        var key = {{row[0]}};
        console.log(key);
    </script>
    <td>
        <a href="" onClick="location.href=number +key;return false";>Editing</a> 
    </td>
    </tr>
%end
</table>
4

2 回答 2

2

Python 代码在服务器上运行；Javascript 代码在客户端上运行。
因此，Javascript 代码只能在 Python 代码完成后运行。

但是，这与您的问题无关。

HTML 标签不创建局部变量范围；您的所有行共享相同的key变量。

当您单击链接时，key将始终具有最后一个值（因为所有 JS 都已执行）。

href您应该改为在服务器端代码中构建属性。

于 2013-08-26T02:21:08.810 回答
0

“问题”在您的 javascript 中。但这并不是真正的问题，这只是 javascript 事件循环的工作方式。简短的回答是，当您的浏览器读取呈现的模板时，它会将onClick事件加载到事件队列中，但实际上并没有调用它们。只有在处理完页面后，它才会开始遍历事件队列并一一读取它们。但是此时，<script>您页面中的所有标签都已处理，并且当前值key将是它从循环中获得的最后一个值，大概5在您提供的示例中。当浏览器处理来自事件队列的事件时，它只会将当前值分配给key句柄onClick，这就是为什么它们都得到值 5。

一种可能的解决方法是使用闭包在key读取脚本标签时获取当前值的“快照”。为了创建闭包，我将使用自调用函数，但还有其他方法可以做到这一点：

var key = (function() {
    return {{row[0]}};
)();

这实际上是一个非常常见的问题，因此您可能想四处寻找更彻底的解释。一个好的起点是这里的“臭名昭著的循环问题”小节：Javascript Scope and Closures

于 2013-08-26T02:40:06.120 回答