使自定义聚合物元素不静态地起作用

Question

我正在尝试使用 Polymer 制作日期选择器。我想在一个页面上放置其中两个，但它们是静态的。我的意思是，当我在一个上单击下个月的按钮时，它会在两个上发生变化。

我通常不使用这样的元素，所以我从来没有考虑过一个元素的多个实例会如何表现。

如何制作一个行为类似于实例对象而不是静态对象的元素？

<!-- I'm omitting the style and some script for brevity -->
<polymer-element name="date-picker" attributes="chosenDate">
<template>
<div class="picker" vertical layout>
    <div class="select" horizontal justified layout>
        <div>
            <core-icon icon="chevron-left" on-tap="{{lastMonth}}"></core-icon>
        </div>
        <div>{{monthName}} {{date}}</div>
        <div>
            <core-icon icon="chevron-right" on-tap="{{nextMonth}}"></core-icon>
        </div>
    </div>

    <template repeat="{{w in calendar}}">
                <div horizontal layout>
            <template repeat="{{d in w}}">
                    <div class="dateBox {{ date == d.day && d.inMonth ? 'today' : '' }} " flex>{{d.day}}</div>
            </template>
                </div>
    </template>

</div>


</template>
<script>
Polymer('date-picker', {
date : null,
month: null,
monthName: '',
calendar : [],
update: function() {
   /* code that figures out weeks/days */
},
/* these cause all instances of date-picker to change month */
lastMonth : function() {
    this.month -= 1;
    this.update();
},
nextMonth : function() {
    this.month += 1;
    this.update();
}
});
</script>
</polymer-element>

完整代码笔 http://codepen.io/anon/pen/vEJMpJ

Answer 1

两个元素共享的是 calendar 数组。由于您在元素原型上定义了默认值 []，因此这个空数组的单个实例对于所有元素实例都是通用的。

因此对于数组和对象属性，您应该在 created() 回调中初始化它们。然后两个元素实例得到自己的空calendar数组。

使自定义聚合物元素不静态地起作用

Making custom polymer elements not act statically

polymer