如何修改元素中已有的<content>？

Question

我想扩展内容并添加包含数据绑定的新 dom 元素。在示例中运行添加新项目，但数据绑定不起作用。可以解决我的问题吗？

<polymer-element name="wizard">
    <template>
        <style>
            :host {
                display: block;
            }

            :host #pages section {
                position: static;
            }

        </style>

        <core-animated-pages id="pages"
                             transitions="slide-from-right"
                             selected="{{selectedPageIndex}}">
            <content id="content"></content>
        </core-animated-pages>
    </template>

    <script>
        Polymer({
            attached: function() {
                var nodes = this.$.content.getDistributedNodes();

                for(var i = 0; i < nodes.length; i++) {
                    if(nodes[i] instanceof HTMLElement) {
                        var el = nodes[i].querySelector('div div');
                        el.innerHTML = el.innerHTML + '<button on-tap="{{nextPage}}">Next</button>';
                    }
                }
            },

            selectedPageIndex: 0,

            previousPage: function () {
                this.$.pages.selectPrevious(true);
            },

            nextPage: function () {
                this.$.pages.selectNext(true);
            }
        });
    </script>
</polymer-element>

Answer 1

终于找到问题的原因了。

TL;DNR

添加

this.eventController = this;

行在您的 domReady 处理程序的开头。 神秘地 成功了，事件处理程序被绑定和处理。

我将此视为当前 Polymer 实施中的错误，并将其报告给 Polymer 团队。问题的原因是 0.5.4 版本 polymer.js:10696 中的 findController 函数。当调度程序查找事件处理程序时，它会迭代事件目标的父级，直到定义了 eventController 属性。不幸的是，此属性仅针对 lightFromTemplate 函数得到了正确处理。当 shadow DOM 与 injectBoundHTML 绑定时，此赋值在当前实现中被遗忘。

实时预览：http://plnkr.co/edit/67WwbKmqsJRmsdXCbgbb?p=preview

NB 请注意，网络组件必须以连字符命名。 my-wizard 是专有名称，而 wizard 不是。

如何修改元素中已有的<content>？

How to modify existing <content> in a element?

javascript

web-component

polymer