Polymer Component 中的 Knockout 与 shady Dom 正确绑定，但不与 shadow Dom 正确绑定答案

【问题标题】：Knockout in Polymer Component binds correctly with shady Dom but not shadow DomPolymer Component 中的 Knockout 与 shady Dom 正确绑定，但不与 shadow Dom 正确绑定
【发布时间】：2016-03-21 01:23:05
【问题描述】：

我有以下聚合物成分（仅用于测试）：

<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>

这意味着第二个 visu-tag-root-canvas 内的 2 个 visu-conveyor 应该绑定到“A.B.B”，而外面的那些应该绑定到“B.B”！

这适用于 shady dom！但是当我启用 shadow Dom 时，都绑定到同一个变量！ “B.B”

添加后，我的 DataContext for Binding 如下所示：

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

【问题讨论】：

标签： javascript dom knockout.js data-binding polymer

【解决方案1】：

是我的错。由于 ShadowDom 带来了真正的封装，所以 ko.dataFor(self) 对所有 visu-conveyor 返回相同，因为 dom 被封装了！

如果我将“self.$.rootObj”更改为“self”，它会在启用 shadow dom 的情况下工作

【讨论】：