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.html：1938 Uncaught TypeError：无法设置属性＆＃39; _parent_startDate＆＃39;未定义的

如果我将值设置为固定字符串，例如：

，也会发生这种情况

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

如果没有指定值，则代码运行没有任何问题。但当然没有设置默认值。

有没有人知道我做错了什么？我使用最新版本的聚合物（昨天安装）。

谢谢！

Answer 1

更新问题是Firebase回调的上下文未绑定到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）将无法达到您期望的效果，这可能是将属性设置为返回值指定的功能。在这里使用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：

输入：boolean，number，string或function。

属性的默认值。如果value是函数，则调用该函数，并将返回值用作属性的默认值。如果默认值应该是实例唯一的数组或对象，请在函数内创建数组或对象。有关详细信息，请参阅Configuring default property values。

Polymer：设置属性的默认值会导致TypeError

1 个答案: