Question

我正在尝试在转发器中显示一些数据，但我无法让它工作。

<dom-module id="mythings-latest-values">
    <template>
        <ul>
            <template is="dom-repeat" items="[[mythings]]">
                <li>X <mythings-list-item item="{{item}}"></mythings-list-item></li>
                <li>[[item.length]] [[((item.length)-1)]] {{item[item.length-1].code}}: [[item[item.length-1].price]]</li>
            </template>
        </ul>
    </template>

    <script>
        class MythingsLatestValues extends ReduxMixin(Polymer.Element) {
            static get is() { return 'mythings-latest-values'; }
            static get properties() {
                return {
                    mythings: {
                        type: Object,
                        statePath(state) {
                            return Object.values(state.mythings);
                        }
                    },
                };
            }

            ready() {
                console.log("ready: ",this.item);
            }
        }

        window.customElements.define(MythingsLatestValues.is, MythingsLatestValues);
    </script>
</dom-module>

和

<dom-module id="mythings-list-item">
    <template>
        AA
    </template>

    <script>
        class MythingsListItem extends Polymer.Element {
            static get is() { return 'mythings-list-item'; }

        }
        window.customElements.define(MythingsListItem.is, MythingsListItem);
    </script>

</dom-module>

作为输出，我的列表如下：

X
1 [[（（item.length）-1）]] {{item [item.length-1] .code}}：[[item [item.length-1] .price]]

模板中数据绑定中的逻辑显然不起作用，因此我将其移动到一个单独的元素：mythings-list-item。它运行。当我给它一个带有一些日志记录的ready（）方法时，它只运行一次（而不是每个项目），但它根本不显示。

这里发生了什么？

我才开始使用Polymer。我完全有可能忽略一些非常基本的东西，但我只是看不到它。

我正在使用聚合物还原剂，对我来说也是新手，但我不知道它是如何导致这个问题的，尽管它可能是我丢失数据的原因。如果是这样，那是一个单独的问题，超出了我的问题范围。我只是想让转发器工作的模板。

编辑：我找到了答案（见下文）。结果我忘了给super.ready()打电话。

Answer 1

我明白了：我的ready（）方法不会调用super.ready();。添加它可以修复它。

新的ready（）方法：

ready() {
    super.ready();
    console.log("ready: ",this.item);
}

我怀疑每个生命周期回调都需要调用super。

Answer 2

演示：Polymer-2.0-Redux

确保导入mythings-list-item.html和redux-state.html（设置redux sture的位置）是否已导入？

设置return state.mythings等属性的值，如果要检查数据是否来自redux使用observer。

static get properties() {
    return {
        mythings: {
            type: Object,
            statePath(state) {
                return state.mythings;
            },
            observer: "_checkMythings(mythings)"
        },
    };
}

_checkMythings(mythings){
    console.log(mythings);
}

Answer 3

mythings属性如何重复？因为它是一个对象。它应该是数组。

转发器中的自定义元素不起作用

3 个答案: