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>

完整的codepen http://codepen.io/anon/pen/vEJMpJ

Answer 1

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

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

定制聚合物元素不是静态的

1 个答案: