敲除聚合物組分與黑幕的Dom正確結合，但沒有陰影的Dom

我有（僅用於測試）以下聚合物組分：敲除聚合物組分與黑幕的Dom正確結合，但沒有陰影的Dom

<dom-module id="visu-conveyor"> 
    <template> 
     <div id='conveyor'> 
      {{objectName}} 
      <div style="width: 80px; height: 90%;"> 
       <div style="width: 10px; height: 10px; background: blue;" data-bind="visible: B.B.Value"></div> 
       <span data-bind="text: $data"></span> 
      </div> 
     </div> 

    </template> 

    <script> 
    Polymer({ 
     is: "visu-conveyor", 
     properties: { 
      objectName: String 
     }, 
     attached: function() { 
      var self = this; 
      var dc = ko.dataFor(self); 
      ko.applyBindings(dc, self.$.conveyor); 
     } 
    }); 
    </script> 
</dom-module>

該組件在另一個組件也許託管這樣的：

<dom-module id="visu-tag-root-canvas"> 
    <template> 
     <div style="height: 100%; width: 100%" id="rootObj"> 
      <content></content> 
     </div> 

    </template> 

    <script> 
    Polymer({ 
     is: "visu-tag-root-canvas", 
     properties: { 
      tagRoot : String 
     }, 
     ready: function() { 
      var self = this; 

      var dc = ko.dataFor(self); 

      if (self.tagRoot != null) { 
       //self.$.rootObj.setAttribute("data-bind", "with: " + self.tagRoot); 
       //todo -> get folder recursive 
       ko.applyBindings(dc[self.tagRoot], self.$.rootObj); 
      } else { 
       ko.applyBindings(dc, self.$.rootObj); 
      } 
     } 
    }); 
    </script> 
</dom-module>

對於實施例的頁面可以看起來像這樣：

<visu-tag-root-canvas> 
    <visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 64px;" object-name="HH66"></visu-conveyor> 
    <visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 160px;" object-name="aa31"></visu-conveyor> 
    <visu-tag-root-canvas tag-root="A" style="left: 284px; position: absolute; top: 255px; width: 305px; height: 216px;"> 
      <visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 30px;" object-name="EE77"></visu-conveyor> 
      <visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 126px;" object-name="II88"></visu-conveyor> 
    </visu-tag-root-canvas> 
</visu-tag-root-canvas>

這意味着2 VISU-輸送機插件ide第二個visu-tag-root-canvas應該綁定到「A.B.B」，而外部的綁定到「B.B」！

這適用於陰暗的dom！但是當我啓用陰影Dom時，所有綁定到相同的變量！「B.B」

加法我的DataContext的結合看起來是這樣的：

{ 
A { 
    B { 
    B { 
     Value 
     } 
    } 
    } 
B { 
    B { 
    Value 
    } 
    } 
}

來源

2015-12-15 Jochen Kühner

是我的錯。由於ShadowDom帶來了真正的封裝，因爲dom被封裝了，所以ko.dataFor（self）對所有的visu-conveyor都返回相同的結果！

如果我將「self. $。rootObj」更改爲「self」，它可以與啓用的影子dom一起使用

來源

2015-12-16 07:48:24

敲除聚合物組分與黑幕的Dom正確結合，但沒有陰影的Dom

回答

相關問題