在 Polymer 组件中使用 Knockout 会引发错误：“未捕获的错误：您不能将绑定多次应用于同一元素。”答案

【问题标题】：Usage of Knockout in a Polymer Component raises error: "Uncaught Error: You cannot apply bindings multiple times to the same element."在 Polymer 组件中使用 Knockout 会引发错误：“未捕获的错误：您不能将绑定多次应用于同一元素。”
【发布时间】：2016-03-20 12:52:17
【问题描述】：

我有这个聚合物组件：

<dom-module id="visu-conveyor">
    <template>
        <div id='conveyor' style="background: lightblue; height: 100%; width: 100%">
            {{objectName}}
            <div style="width: 80px; height: 90%; background-image: url(images/rollers_horizontal.png); background-repeat: repeat;">
                <div style="width: 10px; height: 10px; background: blue;" data-bind="visible: A_B_A"></div>
            </div>
        </div>

    </template>

    <script>
    Polymer({
        is: "visu-conveyor",
        properties: {
            objectName: String
        },
        ready: function () {
            var self = this;
            var viewport = self.$.conveyor;

            ko.applyBindings(visuClient_Tags, self.$.viewport);
        }
    });
    </script>
</dom-module>

当我多次使用它时，我得到了这个错误！但我认为我应用绑定的元素每次都是另一个（寺庙的一个实例）？还是我错了？

【问题讨论】：

我不是聚合物专家，但 DOM 元素变量的名称是“viewport”：我希望两个聚合物组件都位于同一个虚拟视口中，从而解释了你得到的错误。 - self.$ 上没有一些属性包含对组件的 DOM 元素的引用吗？
???我在同一个容器中有多个自定义元素实例！并且他们的 dom 应该用于淘汰赛！
我不知道你想通过大量的交互来传达什么？我只是想发表一个有用的评论...无论如何，我确实了解您有该组件的多个实例，但viewport 并不总是引用 same DOM 元素包含您自己组件的所有这些实例？如果你在applyBindings 之前console.log(self.$.viewport) 会发生什么？我冒险猜测它多次重复相同的元素。（但再说一遍：我不太了解聚合物。）
我的示例代码错误...我已经修复了！对不起！但还是同样的错误！
不，对不起，你是对的！我的代码错了，现在错误消失了

标签： html knockout.js binding polymer

【解决方案1】：

是拼写错误！

我的代码应该是这样的：

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

【讨论】：