2

私はjsRenderを使用しており、テンプレート内でレンダリングされる要素にクリック、マウスオーバーなどのイベントをバインドしたいと考えています。イベントをバインドするときに、データを引数として渡したいです。

例 ：

<li id="liv_{{:nid}}" onmouseover=[call some function and pass #data]>
<div class="qwqw"><a href="#"></a></div>
<div class="">
    <p class="we">{{:spd}} <span>mph (todo)</span></p>
</div>

<div class="clear"></div>

上記のコードを試しましたが、うまくいきませんでした。誰かがこれを行う方法について洞察を与えることができますか?

ありがとう

4

2 に答える 2

0

イベントで呼び出したい関数onmouseoverが定義されている限り、これは簡単です:

<li id="liv_{{:nid}}" onmouseover="someFunction({{:#data}});"> </li>

ただし、jQuery でレンダリングした後にこれらのイベントをバインドする方がおそらくクリーンです。data-*これらすべてのリスト項目に属性を適用し、それをセレクターで使用することを想像できます。

于 2013-03-20T13:39:35.620 に答える
0

{{:#data}}#data を文字列としてレンダリングするため、#data が文字列化されてきちんと解析されない限り、このアプローチは機能しません。手動で JSON を使用しないと、オブジェクトは適切に文字列化または解析されません。実際、数値、ブール値、undefinedおよびのみnullが正しく文字列化および解析されるのではないかと思います。関数が global でない場合、そのアプローチも機能しません。いつでもコールバック関数をグローバルに定義しなければならないことは、深刻な問題だと思います。そのため、特に JavaScript が既に実行されている場合は、タグ内イベント ハンドラーの使用はお勧めできません。

代わりに、レンダリングされたコンテンツを DOM に挿入した後、そこにイベントをバインドできます。これが大まかなスケッチです。

クラスまたはその他のセレクター フィードを に追加します<li>。

<li class="onMouseEnter" id="liv_{{:nid}}"></li>

に相当するものをキーとして使用して、各 #data 値をオブジェクトに入れliv_{{:nid}}ます。

var dataMap = {};
$.each(yourDataValues, function (i, value) {
    dataMap['liv_' + value.nid] = value;
});

最後に、レンダリングされたテンプレートをプッシュしたコンテナーにライブ イベントをバインドします。

$(containerOfRenderedTemplate).on('mouseenter', '.onMouseEnter', function () {
    var id = $(this).attr('id');
    var data = dataMap[id];
    desiredCallbackFunctionWhichConsumesData(data);
});

dataMapイベントバインディング呼び出しは同じスコープ内にある必要があります。

注:このレンダリングが複数回発生する可能性があり、レンダリングされたコンテンツをまったく新しいレンダリングされたコンテンツに置き換える必要がある場合は、新しいイベントをバインドする前に古いイベントのバインドを解除する必要があります。

$(containerOfRenderedTemplate).off('mouseenter', '.onMouseEnter');
于 2013-04-19T18:34:18.313 に答える