将函数作为属性值传递

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 元素时，它是一个字符串。我也为此奋斗了一段时间，这是我能找到完成它的唯一方法。该解决方案创建一个返回函数调用的函数，您将其指定为聚合物元素属性之一的值。

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

这是关于 eval( ) 和 Function 构造函数之间差异的一个很好的答案的链接，以防它有帮助：/sf/answers/321996251/

最后，为了安全起见，我将其放入“附加”生命周期事件中，因为它发生的时间晚于“就绪”。我不确定是否可以使用较早的生命周期事件或“就绪”而不是“附加”。也许有人可以改进这个答案并让我们知道。