将函数作为属性值传递

Question

我想知道是否可以将函数 foo() 作为属性 func="foo()" 传递并在聚合物元素内部调用 this.func()？

<foo-bar func="foo()"></foo-bar>


Polymer({
  is: 'foo-bar',
  properties: {
    func: Object,
  },
  ready: function() {
    this.func();
  }
});

多年来我一直在努力使它正常工作，但运气不佳。

提前致谢。

Answer 1

<foo-bar func="foo()"></foo-bar>



Polymer({
  is: 'foo-bar',
  properties: {
    func: {
        type: String, // the function call is passed in as a string
        notify: true
  },
  attached: function() {
    if (this.func) {
        this.callFunc = new Function('return '+ this.func);
        this.callFunc(); // can now be called here or elsewhere in the Polymer object
  }
});

所以诀窍是当您第一次将 "foo( )" 传递给 Polymer 元素时，它是一个字符串。我也为此奋斗了一段时间，这是我能找到完成它的唯一方法。此解决方案创建一个函数，return 是您的函数调用，您将其指定为聚合物元素属性之一的值。

有些人可能会说您不应该使用 Function 构造函数，因为它类似于 eval( ) 并且……您知道，整个 'eval is evil' 事情。但是，如果您只是将它用于 return 对另一个函数的调用并且您了解范围含义，那么我认为这可能是一个合适的用例。如果我错了，我相信会有人告诉我们！

这里有一个 link 关于 eval( ) 和 Function 构造函数之间的区别的一个很好的 SO 答案，以防它能有所帮助：

最后，为了安全起见，我将它放在 'attached' 生命周期事件中，因为它发生的时间晚于 'ready'。我不确定是否可以使用更早的生命周期事件或 'ready' 来代替 'attached'。也许有人可以改进这个答案并让我们知道。

将函数作为属性值传递

Passing a function as an attribute value

polymer