1

jQuery テンプレート プラグイン (公式の jquery-tmpl プラグイン) を使用して HTML リストを作成しています。テンプレートは基本的に<li>要素を定義し、次のようになります。

<script id="item-display-template"> type="text/html">
  <li>
    <div class="item-display-container">
        <p>${SomeData1} .... ${SomeData2} etc....</p>
        <a onclick="editRow();">Edit This Item</a>
    </div>
  </li>
</script>

結果リストの各項目には、「editRow」関数を呼び出す「この項目を編集」リンクがあります。編集中の項目のデータベース レコードの主キー (id) をこの関数に提供できるようにする必要があります。「id」は、テンプレートにバインドされている JSON に含まれています。私が最初に考えたのは、「このアイテムを編集」リンクでこれを行うことでした。

<a onclick="editRow(${Id});">Edit This Item</a>

それはうまくいくと思いますが、これが「正しい方法」であるかどうかはわかりません。

テンプレートがレンダリングされているときに、テンプレート内で 'jQuery.data()' メソッドを呼び出して、ID 値を DOM 要素の 1 つにアタッチすることは可能ですか?

4

6 に答える 6

4

テンプレートを次のように変更します。

<script id="item-display-template" type="text/html">
  <li>
    <div class="item-display-container" data-itemid="${Id}">
        <p>${SomeData1} .... ${SomeData2} etc....</p>
        <a class="editrow">Edit This Item</a>
    </div>
  </li>
</script>

に ID を配置することで、リンクdiv.item-display-containerのように、同じ ID に簡単にアクセスできる他の機能を簡単に追加できます。delete

次に、<ul>これらの要素を挿入する<li>要素で、これを行います。

$('ul').delegate('.editrow','click',function(e) {
    e.preventDefault();
    var id = parseInt($(this).parents('.item-display-container').attr('data-itemid'), 10);
    editRow(id);
});
于 2010-10-14T12:52:02.000 に答える
4

次のようにdata 属性を使用します。

<script id="item-display-template"> type="text/html">
  <li>
    <div class="item-display-container">
        <p>${SomeData1} .... ${SomeData2} etc....</p>
        <a class="edit" href="#" data-id="${Id}">Edit This Item</a>
    </div>
  </li>
</script>

次に、次のような.live()or.delegate()ハンドラー:

$("a.edit").live("click", function() {
  var id = $(this).attr("data-id");
  //use the id
});

または.delegate():

$("#myUL").delegate("a.edit", "click", function() {
  var id = $(this).attr("data-id");
  //use the id
});

補足として: jQuery 1.4.3 + では、今週後半に公開されますが、次.data()のように使用できます。

var id = $(this).data("id");
//or:
var id = $.data(this, "id");

data-idデータ コレクションに値がない場合は、属性にフォールバックして値を取得します。

于 2010-10-14T12:52:19.023 に答える
1

いいえ、それはできませんが、「id」属性などの HTML 属性に「id」を隠しておくことはできます。

(実際には、テンプレートにインライン Javascript ブロックを生成させることもできますが、それはひどく醜いようです。)

昔ながらの「onclick」を使用してイベント ハンドラーをバインドするのではなく、<a>要素に「id」値 (「id」値が数値の場合はアルファ プレフィックス付き) と「class」値を指定できます。次に、jQuery コードからテンプレートを展開した後、イベント ハンドラーをバインドできます。または、イベントハンドラーを事前にバインドすることもできます.delegate()( @Nick の回答のように編集します。)

于 2010-10-14T12:50:01.697 に答える
1 
<script id="item-display-template"> type="text/html">
  <li>
    <div class="item-display-container">
        <p>${SomeData1} .... ${SomeData2} etc....</p>
        <a id="id_${Id}" class="link-for-edit">Edit This Item</a>
    </div>
  </li>
</script>

var eventEdit = function(ev) {
    //...
    var id = $(this).attr('id').split('_');
};

var items = $('#item-display-template').tmpl(data);

$(items).find('a.link-for-edit').bind('click', eventEdit);
$(items).appendTo('ul');
于 2010-10-14T13:00:43.533 に答える
0

JQueryテンプレートは、tmplItem関数を使用してこの問題をすでに解決しています。クリックされた要素を使用して、バインドされているデータを関連付けることができます。

$("#item-display-template").tmpl(clientData).appendTo("ul"); 

$("li a").click(function() {
    var tmplItem = $(this).tmplItem();
    alert(tmplItem.data.id);
});

私がここで行った完全な実例を参照してください

....そして別の例としてここに関連する質問があります。

于 2011-05-14T22:17:35.383 に答える
0

jQuery テンプレートには jQuery.tmplItem() 関数があります。これを使用して、テンプレートのレンダリングに使用したデータ オブジェクトにアクセスできます。したがって、DOM レベルでデータを複製する必要はありません。次のように使用できます。

<script id="item-display-template" type="text/html">
  <li>
    <div class="item-display-container">
        <p>${SomeData1} .... ${SomeData2} etc....</p>
        <a class="editrow">Edit This Item</a>
    </div>
  </li>
</script>

次に、[編集...] クリック ハンドラーで、テンプレートの基になるデータにアクセスして Id 値を取得します。

$('ul').delegate('.editrow','click',function(e) {
    e.preventDefault();
    var id = $(this).tmplItem().data.Id;
    editRow(id);
});
于 2011-03-22T14:21:01.777 に答える