0

私はここでチュートリアルに従っています：http：//blog.chariotsolutions.com/2012/01/from-list-to-details-view-using.html

レンダリング時にクリックハンドラーをリストビューアイテムに動的にバインドしようとしています。上記のリンクで説明されている方法は機能しません。私はいくつかの選択肢を試しました。

チュートリアルでは、レンダリング関数でこれを提案しています:(テンプレートは以下にあります）

    activities.each(function(activity){
        var renderedItem = template(activity.toJSON()),
        $renderedItem = $(renderedItem);  //convert the html into an jQuery object
        $renderedItem.jqmData('activityId', activity.get('id'));  //set the data on it for use in the click event
        $renderedItem.bind('click', function(){
           //This part is different in tutorial, but irrelevant
           alert("Hello.");
           alert($(this).jqmData('activityId'));    //'this' represents the element being clicked
        });
        listView.append($renderedItem);
    });

これは動作しません。ボタンは作成されますが、クリックしても何も起こりません。Chromeの開発ツールには、ドキュメントとドキュメントの2つのクリックイベントリスナーしか表示されません。

私はこれらを代替品として試しましたが、何も機能しません。警告メッセージ、ブレークポイントヒット、登録されたクリックイベントリスナーはありません。..。

$renderedItem.on('click', function(){
       alert("Hello.");
       alert($(this).jqmData('activityId'));     //'this' represents the element being clicked
   });

$renderedItem.live('click', function(){
       alert("Hello.");
       alert($(this).jqmData('activityId'));     //'this' represents the element being clicked
   });

私はまた、イベントを登録する標準的なバックボーンの方法を無駄に試しました...

events: {
    'click .activity-list-item':'btnSelected'
},

...

btnSelected: function(){
    alert("Hello");
    //This is what I really want. Some data attached to the sender
    alert($(this).jqmData('activityId'));
}

これはテンプレートです：

<li><a href="#activity-details" class="activity-list-item"identifier="<%= id %>"><%= date %> - <%= type %></a></li>

ご列席の皆様、ありがとうございました。

編集：私はテストを行いましたが、何らかの理由でバインドが削除されていると思います。私がすることができます：

    myCollection.at(0).bind('click', function(){
        alert("hello");
    });
    myCollection.at(0).trigger('click');

...そしてそれは正常に機能します。バインドが削除される可能性がある理由はありますか？

編集2：これはまだ解決されていません。残念ながら、私の一時的な解決策はまさにそれでした。すべてのリストビューアイテムを削除し、再入力して更新してもクリック可能ですが、アイテムをリストに追加すると、クリックできなくなります。.bind、.on、.live、.delegate。それらのどれも動作しません。これについてもっと多くの文書があったらいいのにと思います。これは一般的なプログラミングの問題であり、一般的な解決策はありません。

4

3 に答える 3

1

jquerymobileがイベントバインディングをインターセプトしてバインド解除しているようです。現在JQMアプリをテストするように設定されていないため、これはまだ推測にすぎませんが、リンクのイベントバインディングのjqmのデフォルト制御をオフにする設定linkBindingEnabledがあるようです。

次のように設定できます。

$(document).bind("mobileinit", function () {
  $.mobile.linkBindingEnabled = false;
});

それを試して、どこにでも行くことができるかどうかを確認してください...そうでない場合は、製図板に戻ってください:)

于 2012-06-14T21:20:17.620 に答える
0

コードの後半でlistView変数はどうなりますか？具体的には、listView要素はどのようにDOMにアタッチされていますか？DOMに追加するときにlistView.html（）を使用すると、すべての子要素に添付されているデータとイベントが失われます。

于 2012-06-14T21:25:39.147 に答える
0

私の問題は、renderメソッドを複数回呼び出すことに起因しているようです。私はこれを持っています：

    //in the render method
    $(this.el).empty();

リストビューをクリアし、新しく変更されたコレクションを再描画するために使用されます。アイテムがコレクションに追加されたとき、私はすべてのアイテムをクリアして再描画するためにrenderメソッドを呼び出していました。

これは、明らかに、私のビューからイベントハンドラーを削除していました。これは直感に反しているようです。初めて動作しますが、なぜ再び動作しないのですか？jQuery .empty（）doc：

    "To avoid memory leaks, jQuery removes other constructs such as data and 
    event handlers from the child elements before removing the elements 
    themselves."

この問題を修正するために、空の前にデタッチを追加しました。

   $(this.el).detach();
   $(this.el).empty();

これが私の初心者のせいで良い習慣かどうかはわかりませんが、うまくいきます。これを正しく理解していれば、イベントリスナーをアイテムから切り離してからクリアします。したがって、将来のリストアイテムのリスナーを保持します。

基本的に、ビュー自体で.empty（）メソッド$（this.el）を呼び出すと、レンダリング関数のメソッドを使用してイベントハンドラーを追加するためのABILITYが削除されるようです。私の推測では、.empty（）が実行された後にイベントハンドラーを追加する別の方法があります。誰かがこれについて私を確認または修正できれば、私はそれが大好きです。

于 2012-06-15T16:37:27.407 に答える