1

私はこのコードを持っています:

{% 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 %}

}

ツリー構造のすべての要素を接続するフォームを構築しようとしています。

4

2 に答える 2

2

あなたはそれを間違っています：テンプレート言語でJavascriptコードを生成しようとしないでください。

サーバー側からクライアント側のJavascriptコードにデータを渡すための推奨されるアプローチ

  • JavaScriptコードを別の.jsファイルとして作成します

  • ページテンプレートからHTMLを生成するときに、データ属性をJSONとして使用して、関連データをHTMLコードに埋め込みます

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

  • ページがブラウザで実行されるときに、魔法のタスクを実行する必要があるページを表示している場合は、クライアント側のDOMreadyイベントでこのデータを読み取ります。これを行うには、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ツリーベースのJavaScriptテンプレートエンジン

こちらです

  • JavaScriptコードを生成する必要はありません

  • より保守しやすくなります（.jsファイルなどに構文が強調表示されます）。Firebugなどを使用してJavaScriptコードをデバッグでき、エラー行番号は意味があります。

  • キャッシュに対応し、HTMLページへのペイロードが少なくなります

このアプローチは技術的に優れており、一度習得すると、保守が容易になり、バグが発生しにくくなります。ただし、これは、サーバーからブラウザーに送られるソフトウェアスタック全体を理解する必要があることも意味します。これは、初心者の開発者にとってより多くの学習を意味します。

于 2013-03-14T11:17:32.410 に答える
2

ミッコは 100% 正しいです。サーバーから生データを渡し、javascript で解析する必要があります。

ありがたいことに、これを簡単にするプラグインがあります。http://daffl.github.com/2011/01/06/jquery-dform.htmlがその 1 つです。

ここに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 の書式設定に関する詳細については、json への Python 出力の書式設定を参照してください。

インライン 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 が完全に詰まることがあります。

于 2013-03-14T11:29:00.920 に答える