javascript - Polymer:设置属性的默认值会导致 TypeError

Question

我正在尝试设置 polymer 元素属性的默认值，如下所示:

Polymer({
  is: 'list-expenses',

  properties: {
    route: Object,
    startDate: {
        type: String,
        notify: true,
        value: 'setStartDate'
    },
    endDate: {
        type: String,
        notify: true,
        value: 'setEndDate'
    }
  },

  setStartDate: function() {
      var ref = new Firebase("https://xxx.firebaseio.com/expenses");
        ref.orderByChild("sortDate").limitToFirst(1).on("child_added", function(snapshot) {
          return snapshot.val().sortDate;
        });
  },

  setEndDate: function() {
    var ref = new Firebase("https://xxx.firebaseio.com/expenses");
    ref.orderByChild("sortDate").limitToLast(1).on("child_added", function(snapshot) {
      return snapshot.val().sortDate;
    });
  }

如果我现在运行代码(使用 polymer 服务)，我会在浏览器控制台上收到以下输出:

polymer.html:1938 Uncaught TypeError: Cannot set property '_parent_startDate' of undefined

如果我将值设置为固定字符串，也会发生这种情况，例如:

startDate: {
            type: String,
            notify: true,
            value: '2016-06-05'
        }

如果不指定该值，代码运行不会出现任何问题。不过，当然没有设置默认值。

有人知道我做错了什么吗？我使用最新版本的 polymer (昨天安装的)。

谢谢!

Answer 1

更新问题是 Firebase 回调的上下文未绑定(bind)到 Polymer 实例。有几种方法可以解决此问题，但最简单的方法是使用 arrow function :

setStartDate() {
  const ref = new Firebase("https://xxx.firebaseio.com/expenses");
  ref.orderByChild("sortDate").limitToFirst(1).on("child_added",
  // function(snapshot) {
  (snapshot) => { // <-- use an arrow-function instead
    this.startDate = snapshot.val().sortDate;
  });
},

setEndDate() {
  const ref = new Firebase("https://xxx.firebaseio.com/expenses");
  ref.orderByChild("sortDate").limitToLast(1).on("child_added",
  // function(snapshot) {
  (snapshot) => { // <-- use an arrow-function instead
    this.endDate = snapshot.val().sortDate;
  });
}

---

请注意，将 value 设置为函数名称(即 string)不会达到您期望的效果，这可能是将属性设置为指定函数的返回值。此处使用字符串只会将属性值设置为该字符串文字。

您实际上应该提供一个函数来调用您想要的函数以获得其返回值:

properties: {
  ...
  startDate: {
      type: String,
      notify: true,
      value: function() { return this.setStartDate(); }
  },
  endDate: {
      type: String,
      notify: true,
      value: function() { return this.setEndDate(); }
  }
},

作为引用，这里是 documentation for value :

Type: boolean, number, string or function.

Default value for the property. If value is a function, the function is invoked and the return value is used as the default value of the property. If the default value should be an array or object unique to the instance, create the array or object inside a function. See Configuring default property values for more information.