Question

我有这段代码：

{% for user in users %}

        <form name="form_user_{{ user.id }}" method="post" action="/networks/{{ net.id }}/sensors/{{ sens.id }}/rights">
          <tr>
            <td>
              <div>
                {{ escape(user.name) }}
                <input type='hidden' name="id" value='{{ user.id }}'>
              </div>
            </td>
            <td>

              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_0" value="0">
                None
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_1" value="1">
                Read
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_4" value="4">
                Read + Commands
              </label>

              {{ xsrf_form_html() }}
            </td>

          </tr>
        </form>

我会将此代码放在html页面底部的函数脚本中，并将该函数与onClick事件相关联。

我正在尝试编写该函数，但它不起作用。

此功能中的错误在哪里？

function createFormAndSubmit(){

{% for user in users %}

 var submitForm = document.createElement("form_user_{{ user.id }}");
 document.body.appendChild(submitForm);
 submitForm.method = "POST";

 var newElement = document.createElement("<input type='hidden' name='id' value='{{ user.id }}'>");
 inputForm.appendChild(newElement);

 var newElement = document.createElement("<input type='radio' name='perms' id='perms_{{user.id}}_0' value='0'>");
 inputForm.appendChild(newElement);

 submitForm.action= "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights";
 document.forms['form_user_{{ user.id }}'].submit();
 submitForm.submit();

{% end %}

}

我正在尝试构建附加树结构中每个元素的表单。

Answer 1

你做错了：不要试图用任何模板语言生成Javascript代码。

从服务器端向客户端Javascript代码传递数据的推荐方法

将您的JavaScript代码创建为单独的.js文件
从页面模板生成HTML时，使用数据属性作为JSON将相关数据嵌入到HTML代码中

http://html5doctor.com/html5-custom-data-attributes/

当页面在浏览器中执行时，如果您在需要执行魔术任务的页面上，则在客户端DOM ready事件上读取此数据。您可以通过调用jQuery来查找包含数据属性$("div.my-marker-css-class").size() > 0

http://api.jquery.com/ready/

使用JSON.parse($("div.my-marker-css-class").data())
...使用jQuery或客户端模板填写或生成必要的客户端DOM（HTML）元素

DOM tree based JavaScript template engines

这样

您无需生成JavaScript代码
它更易于维护（您可以将语法高亮显示为.js文件等）。您可以使用Firebug等来调试JavaScript代码，并且错误行号是有意义的。
它的缓存更友好，并且对HTML页面的负载更少

这种方法在技术上更优越，一旦掌握，就更容易维护，并且更容易出错。但是，这也意味着您必须了解从服务器到浏览器的完整软件堆栈，这意味着对新手开发人员的更多学习。

Answer 2

Mikko 100％正确。您需要从服务器传递原始数据并使用javascript解析它。

值得庆幸的是，有一些插件可以让这更容易。 http://daffl.github.com/2011/01/06/jquery-dform.html就是一个。

这是一个python编码器/解码器：http://docs.python.org/2/library/json.html

要从服务器获取JSON，您可以使用：http://api.jquery.com/jQuery.getJSON/

我不太了解python以提供完整的示例，但这些是您可以实现目标的基本步骤。

编辑：我会尝试一个例子，但要准备调试它:) 编辑2：更改为按照OP的要求在自己的文件中生成javascript。

您的HTML将如下所示：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
<script src='myjs.js'></script> <!-- use relative path -->
</head>
<body>
<form id="myform"></form>

</body>
</html>

你的myjs.js文件将如下所示：

    $(function(){
        if($("#myform).length > 0) // only run if #myform exists
        $("#myform").buildForm("http://example.com/myform.json");
    });

myform.json python文件将具有类似以下代码的内容：

import json
json.dumps({'success': True, 'data': users.values()})

有关python和JSON格式的更多信息，请参阅format python output to json。

要使用内联python执行此操作，请尝试以下操作：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
</head>
<body>
<script>
var dataArray = [
{% for user in users %}
   {
    "action" : "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights",
    "method" : "post", // or get
    "elements" :
    [
        { "type" : "hidden",
          "name" : "id",
          "value" : "{{ user.id }}"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
        ]
   },
{% end %}
];

for(var i =0; i<dataArray.length; i++){
   $("body").append("<form id='form"+ i +"'></form>");
   $("#form" + 1).dForm(dataArray[i]);
}
</script>
</body>
</html>

我不会亲自推荐内联方法，但是，它是一个选项。由于循环，您还需要考虑额外的逗号。它可能会根据浏览器添加一个空数组项。 IE可能会完全窒息。

在js脚本中引入内联javascript代码

2 个答案: