动态绑定动态绑定XBL的方式 [英] Dynamic way to unbind dynamically binded XBL

问题描述

  var css ='.findbar-container { -moz-binding：url（'+ self.path.chrome +'findbar.xml＃matchword）}'; 
 var cssEnc = encodeURIComponent（css）; 
 var newURIParam = {
 aURL：'data：text / css，'+ cssEnc，
 aOriginCharset：null，
 aBaseURI：null 
} 
 cssUri =新建服务器。 
 myServices.sss.loadAndRegisterSheet（cssUri，myServices.sss.USER_SHEET）; 
  

findbar.xml 内容包括：

 <？xml version =1.0？> 
< bindings xmlns =http://www.mozilla.org/xblxmlns：xul =http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul> ; 
< binding id =matchword> 
< content> 
< children /> 
 < / content> 
< / binding> 
< / bindings> 
  

这只是添加一个按钮到 FindBar 标记为整个字。但现在删除它，我只是用 myServices.sss.unregisterSheet（cssUri，myServices.sss.USER_SHEET）; 注销样式表，但是这不是解除绑定。 / p>

在ask.mozilla.org回答告诉我这是预期的行为，但没有提供任何解决方案。

我想也许我应该动态添加绑定，而不是通过CSS，我没有测试这个，但它不符合XBL更新的3个原因：
$ b

1. 绑定元素与指定不同绑定的样式规则相匹配
   
2. 将元素从绑定文档中移除
   
3. 元素（例如，通过关闭文件）

答案告诉我， 。

解决方案

好的，我只记得我知道我有一些工作代码可以（重新）绑定不同的XBL绑定，本质上是这样。

它是这样的：

• 有一个基本绑定，或者不是（在你的情况下是原始的 .findbar-container 的绑定）。


• 然后我有多个类定义了不同的 -moz-binding s


• 
  
  
  

  既然这对我有用，它应该在理论上适合你：
  
  

  
  

  • 在你的风格中，对于元素本身没有规则，但对于一个类，例如

      .findbar-container.myaddonclass {moz-binding：...} 
      

  • > Array.forEach（
document.querySelectorAll（。findbar-container），
e => e.classList.add（myaddonclass）
）;


  
  

  • 在您的代码中，在卸载时再次删除类：
    
    

      Array.forEach（
     document.querySelectorAll（。findbar-container），
    e => e.classList.remove myaddonclass）
    ）; 
      

  
  
  
  
  

  这应该强制CSS规则重新评估，并绑定重新评估，因此符合绑定元素匹配指定不同绑定的样式规则规则。
  
  

  当然，如果不是所有要重新绑定的元素都已经存在于您的加载项中，那么这个操作会很糟糕，但是 MutationObserver p>
  

  I am applying a binding like this in a restartless add-on:

  var css = '.findbar-container { -moz-binding:url("' + self.path.chrome + 'findbar.xml#matchword") }';
  var cssEnc = encodeURIComponent(css);
  var newURIParam = {
      aURL: 'data:text/css,' + cssEnc,
      aOriginCharset: null,
      aBaseURI: null
  }
  cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
  myServices.sss.loadAndRegisterSheet(cssUri, myServices.sss.USER_SHEET);
  

  findbar.xml contents are:

  <?xml version="1.0"?>
  <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <binding id="matchword">
          <content>
              <children/>
              <xul:toolbarbutton anonid="matchwordbtn" accesskey="w" class="tabbable" label="Whole Word Only" tooltiptext="Match only whole words" oncommand="console.log('hi')" type="checkbox"/>
          </content>
      </binding>
  </bindings>
  

  This just adds a button to the FindBar labeled "Whole Word Only". But now to remove it, I am just unregistering the stylesheet with myServices.sss.unregisterSheet(cssUri, myServices.sss.USER_SHEET);, however this is not unbinding it.

  An answer on ask.mozilla.org told me this is expected behavior, but offered no solution.

  I was thinking maybe I should dynamically add the binding rather than via CSS, I didn't test this but it doesn't fit the 3 reasons for XBL updates:

  1. A bound element matches a style rule that specifies a different binding
  2. The element is removed from the bound document
  3. The element is destroyed (e.g., by closing the document)

  The answer told me it's expected yet funky behavior.

  解决方案

  Well, I just remembered that I have some working code that does (re)bind different XBL bindings, essentially.

  It goes like this:

  • There is a base binding, or not (in your case the original binding of .findbar-container).
  • Then I have multiple classes that define different -moz-bindings.
  • These classes are set and removed at runtime.

  Since that works for me, it should in theory work for you:

  • In your style, do not have a rule for the element itself, but for a class, e.g.

    .findbar-container.myaddonclass { moz-binding: ... }
    

  • In your code, on load add that new class, e.g.

    Array.forEach(
      document.querySelectorAll(".findbar-container"),
      e => e.classList.add("myaddonclass")
      );
    

  • In your code, on unload remove the class again:

    Array.forEach(
      document.querySelectorAll(".findbar-container"),
      e => e.classList.remove("myaddonclass")
      );
    

  This should force a CSS-rule reevaluation, and bindings reevaluation with that and hence fits the "A bound element matches a style rule that specifies a different binding" rule.

  Of course, this sucks when not all elements you want to rebind are already present on load of your add-on, but MutationObserver could help with that...

  这篇关于动态绑定动态绑定XBL的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！