0

我正在为 Tiddlywiki 制作一种选项卡式界面，我想知道如何在每次打开或关闭 tiddler 时触发此代码。Tiddlywiki 是一种在浏览器中运行的 HTML 笔记本类型的东西，而 tiddler 是#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 创建两个自定义事件。让它们绑定在您使用上面发布的代码的文档中。

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

一种方法是jQuery("#tiddlerDisplay").bind("DOMSubtreeModified", config.macros.singleTiddler.update);，但是我认为这仅适用于 Chrome（可能是 Opera 或 Safari，不确定），并且似乎已被弃用。Firefox 有两个事件来完成同样的事情，但我认为这些也已被弃用。

我在阅读本文并探索 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);

Notice that the event fires after the tiddler opens or closes. Also, as the article states, jQuery can be bugged in the same way, but I don't know about the native DOM methods, and I kind of doubt it. There's supposed to be an event for it, but regardless, everyone should totally drop them and use jQuery!

于 2012-07-20T23:07:16.137 回答