{% url %} 和 jquery

Question

我的视图将给出一个“build_id”的字典，还有另一个视图负责生成给定 build_id 的详细信息。即，第二个视图“build_details”接受一个参数“build_id”。

因为我至少有一个字典中的 id，所以我要生成一个表。

<table>
<tr>
<td> Number </td>
<td> Actions </td>
</tr>
{% for index, value in build_history.items %}
    <tr>
    <td> {{index}} </td>
    <td>
        <select id="action_menu">
        <option value=''>-----</option>
        <option value="build_{{value.build_id}}">Build Details</option>
        </select>
    </td>
</tr>

每一行都应该有一个选择框。当我选择Build Details 时，我应该被重定向到不同的页面。

我的 Jquery 尝试：

function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        var build_id = select.val().replace('build_','');
        window.location.href="{% url build_details build_id %}";
}
</script>

问题错误是：

渲染时捕获 NoReverseMatch：“build_details”的反向 未找到参数“（”，）”和关键字参数“{}”。

我相信这意味着 build_id 没有正确呈现...因为我们没有在 JS 端（浏览器端..）动态构建 build_id。

我能做什么？我知道我可以使用硬编码 http://mydomain 和 concaented build_id - 这会起作用。但是我可以利用模板标签吗？我怎样才能做到这一点？

谢谢。

---

最终工作代码

假设我有一个包含字典长度的变量，当我们有多个具有相同名称的<select> 时，服务器将其视为一个实体。因此，我们可以给一个类命名，并给每个<select>（每一行都有一个）一个唯一的数字ID。

# Javascript
<script type="text/javascript">
    urlMap = {
    {% for index, value in build_history.items %}
        '{{ value.build_id }}' : '{% url build_details value.build_id %}'{% if not forloop.last %},{% endif %}
    {% endfor %}
    };

    $(function() {
        var item_len = parseInt({{dict_len}});
        for (var i = 0; i < item_len; i++){
            $("#"+i.toString()+".action").change(function() {
                  if($(this).val() != '')
                     window.location.href = urlMap[$(this).val()];
            }
        )
    }});
</script>

# HTML (this is a table, each row has one select)

        <select class="action" id={{index}}>
        <option value=''>-----</option>
        <option value="{{ value.build_id }}">Build Details</option>
        </select>

Answer 1

JavaScript 与 django 模板 100% 不兼容。 django 模板呈现 HTML 和 Javascript，然后 javascript 运行 - 那时，模板标签甚至不存在。

您必须将选项值 -> 与 django 的 URL 组合存储在 javascript 数组中。

### Javascript map

urlMap = {
    {% for value in build_history.values %}
        {{ value.build_id }}: '{% url build_details value.build_id %}'
        {% if not forloop.last %},{% endfor %}
    {% endfor %}
};

function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        var build_id = select.val().replace('build_','');
        window.location.href=urlMap[build_id];
}

您也可以使用 jQuery 的 data 函数将数据绑定到元素：

### Jquery data

{% for value in build_history.values %}
    $("#action_menu option[value=build_{{ value.build_id }}]")
             .data('href', '{% url build_details value.build_id %}');
{% endfor %}


function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        window.location.href=select.data('href');
}

---

请复制粘贴。

<script type="text/javascript">
    urlMap = {
    {% for index, value in build_history.items %}
        '{{ value.build_id }}' : '{% url build_details value.build_id %}'{% if not forloop.last %},{% endif %}
    {% endfor %}
    };

    $(function() {
         $("#foo").change(function() {
            window.location.href = urlMap[$(this).val()];
        });
    })
</script>
<select id="foo">
    <option value="">---</option>
    {% for index, value in build_history.items %}
      <option value="{{ value.build_id }}">Build Details</option>
    {% endfor %}
</select>