0

私は Tiddlywiki 用の一種のタブ付きインターフェースを作成していますが、tiddler が開いたり閉じたりするたびにこのコードを起動する方法を考えています。Tiddlywiki はブラウザーで実行される HTML ノートブック タイプのもので、tiddler は の div です#tiddlerDisplay。一度に複数存在する可能性があり、通常は存在します。

リストしたい div は に含まれて#tiddlerDisplayおり、リスト自体はjQuery("#mainMenu > #singleTiddlerList").

config.macros.singleTiddler.update = function(){
    jQuery("#mainMenu > #singleTiddlerList").empty();
    jQuery("#tiddlerDisplay > div").each(function(i,e){
        jQuery("#mainMenu > #singleTiddlerList").append(jQuery(
            createTiddlyButton(document.createElement("li"),jQuery(e).attr("tiddler"),"",config.macros.singleTiddler.clickHandler)
        ).parent());
    });
};

更新:現在のコード (ドキュメントの読み込み時に発生するものなど) の外部から実行できない限り、カスタム イベントを追加することはできません。

4

2 に答える 2

0

まず、divの追加/クリア用に2つのカスタムイベントを作成します。上記のコードを使用するドキュメントにバインドしてもらいます。

jQuery(document).bind('div-removed',function(e){ 
  // code stuff to do for removal 
  jQuery("#mainMenu > #singleTiddlerList").empty(); // required
  // other stuff here
});
jQuery(document).bind('div-appended',function(e){ 
 // code stuff to do on append 
        jQuery("#tiddlerDisplay > div").each(function(i,e){
            jQuery("#mainMenu > #singleTiddlerList").append(jQuery(
                createTiddlyButton(document.createElement("li"),jQuery(e).attr("tiddler"),"",config.macros.singleTiddler.clickHandler)
            ).parent());
        }); // required
  //other stuff here
});

次に、コードで実行を少し変更します。

config.macros.singleTiddler.update = function(){
  $(document).trigger("div-removed");
  $(document).trigger("div-appended");  
};

それは間違いなく唯一の方法ではありません（私は今それを行うこともできると思います.promise()が、それは始まりです。これが機能するかどうかを確認するために更新された更新。

于 2012-07-20T20:50:17.863 に答える
0

1 つの方法は ですがjQuery("#tiddlerDisplay").bind("DOMSubtreeModified", config.macros.singleTiddler.update);、これは Chrome でのみ機能すると思います (おそらく Opera または Safari ですが、確かではありません)。Firefox には同じことを達成するための 2 つのイベントがありますが、これらも非推奨になっていると思います。

この記事を読み、TiddlyWiki のソース コードを調べた後に見つけた別の方法は次のとおりです。

(function( $, oldRem ){
    Story.prototype.displayTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("displayTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.displayTiddler );
(function( $, oldRem ){
    Story.prototype.closeTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("closeTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.closeTiddler );
jQuery("#tiddlerDisplay").bind("displayTiddler", config.macros.singleTiddler.update);
jQuery("#tiddlerDisplay").bind("closeTiddler", config.macros.singleTiddler.update);

tiddler が開いたり閉じたりした後にイベントが発生することに注意してください。また、記事にもあるように、jQuery も同じようにバグる可能性がありますが、私はネイティブの DOM メソッドについては知りませんし、疑問に思っています。そのためのイベントがあるはずですが、関係なく、誰もがそれらを完全にやめて jQuery を使用する必要があります。

于 2012-07-20T23:07:16.137 に答える