Polymer框架回调函数报错：this.callback is not a function求助

这个错误的根源有两个，我来一步步帮你理清：

问题1：属性类型声明错误 #

你把callback的type设为了Object，但实际上它是一个函数类型的属性。虽然函数在JS里属于对象，但Polymer对属性类型的识别更精准，明确声明为Function类型，才能让Polymer正确处理它的初始化逻辑。

问题2：默认值的工厂函数使用错误 #

在Polymer中，对于Object、Array、Function这类引用类型的属性，设置value时必须使用工厂函数——也就是一个返回初始值的函数。如果直接把你的回调函数赋值给value，Polymer会把这个函数当作工厂函数执行，而你的函数没有return语句，返回值是undefined，最终导致this.callback变成了undefined，调用自然就报错了。

修正后的代码 #

把这两个问题修复后，代码应该是这样的：

Polymer({
  is: "parent-dom",
  properties: {
    people: {
      type: String,
      value: "df"
    },
    item: {
      type: String,
      value: "asdf",
      notify: true
    },
    callback: {
      type: Function, // 改为Function类型
      value: function() { // 工厂函数，返回我们的回调函数
        return function(index) { 
          console.log("Inside callback function"); 
        };
      }
    },
  },
  showTargetColorDialog: function(e) {
    this.callback("sadf");
  }
});

额外说明 #

如果你希望所有组件实例共享同一个回调函数（不需要每个实例都创建新的函数），也可以简化写法，既复用函数又符合Polymer的属性初始化规则：

callback: {
  type: Function,
  value: function() {
    return this._defaultCallback;
  }
},
_defaultCallback: function(index) {
  console.log("Inside callback function");
}

内容的提问来源于stack exchange，提问作者avinash