Polymer，如何将值传递给需要字符串的 paper-date-picker 属性？

Question

我正在尝试在我的元素中使用 paper-date-picker。如何将值传递给 paper-date-picker 的 'date' 属性？

<!-- This is working: -->
<paper-date-picker date="2000/1/21"></paper-date-picker>


 <!-- This is NOT working: 
 Inside <my-birthdate birthdate="1977/1/2"></my-birthdate> -->
<paper-date-picker date='{{birthdate}}'></paper-date-picker>

这里是 Plunk.

Answer 1

查看日期选择器的源代码后，发现它不能很好地处理文本。基本上，您必须添加一个将值转换为日期的观察者。此外，从选择器中删除生日。这是一个简单的例子...

<polymer-element name="my-birthdate" attributes="birthdate">
    <template>
        birthdate = {{birthdate}}
        <paper-date-picker id="picker"></paper-date-picker>
    </template>
    <script>
        Polymer("my-birthdate", {
            birthdateChanged: function (oldValue, newValue) {
                if (newValue)
                    this.$.picker.date = new Date(newValue);
            }
        });
    </script>
</polymer-element>

请记住，我不是在检查新值时出错...您必须这样做。

Answer 2

属性中的值始终是字符串。如果你想让 Polymer 将一个属性字符串转换成另一种类型，你必须提示你想要的类型。

<my-birthdate birthdate="1977/1/2"></my-birthdate>

我们希望 birthdate 成为 Date。如果我们像这样更改定义：

<script>
  Polymer({
    birthdate: new Date()
  });
</script>

然后 Polymer 知道将 1977/1/2 转换为 Date 对象。

http://plnkr.co/edit/ftbtl0eCrklAuIbxKRiP?p=preview

请记住这里的绑定与上面的不同：

<paper-date-picker date='{{birthdate}}'></paper-date-picker>

在这种情况下，我们要求 Polymer 将 paper-date-picker.date 属性直接绑定到 birthdate 属性。我们不通过属性，因为那样我们将不得不转换为字符串并返回，而且速度要慢得多。

paper-date-picker 不支持从 birthdate 中的 String 值生成 Date。因此，当直接使用 paper-date-picker（而不是通过属性）时，birthdate 必须具有 Date 值。

Polymer，如何将值传递给需要字符串的 paper-date-picker 属性？

Polymer, how to pass value to paper-date-picker attribute that expects string?

polymer