Question

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

<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-conveyors应该绑定到“A.B.B”而外面的那些绑定到“B.B”！

这适用于阴暗的dom！但是当我启用阴影Dom时，所有绑定到同一个变量！ “B.B”

As Addition我的DataContext for Binding看起来像这样：

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

Answer 1

是我的错。由于ShadowDom带来了真正的封装，ko.dataFor（self）为所有visu-conveyor返回相同的内容，因为dom是封装的！

如果我将“self。$。rootObj”更改为“self”，则可以启用阴影dom

聚合物组件中的敲除与阴暗的Dom正确绑定，但不与阴影Dom绑定

1 个答案: