Question

我想创建一个带有function属性的聚合物元素，在获得成功响应时会调用它。

<foo-bar url="/api/getdata" succCallback="func"></foo-bar>

func function(){
  alert('hi');
}

我试过了：

<polymer-element name="foo-bar" attributes="url succCallback">
<template>
      <core-ajax id="ajax" method="POST" 
      url="{{url}}" 
      contentType="application/json"
      handleAs="json" 
      on-core-response="{{handleResponse}}"></core-ajax>
</template>
<script>
    Polymer({
        handleResponse: function(e){
             var response = e.detail.response;
             if (response.status === 'success') {
                 // call succCallback
                 this.fire(succCallback);
             }
         }
    });
</script>
</polymer-element>

它不起作用。如何调用此succCallback函数？谢谢！

Answer 1

我认为没办法，因为

attributes attr仅消耗字符串。

可行的解决方案可能如下：

<foo-bar url="/api/getdata" succEventTrigger="foo-bar-done"></foo-bar>

然后，将侦听器附加到聚合物并捕获succEventTrigger

 var fooBar = document.querySelector('foo-bar');
  sayHello.addEventListener('foo-bar-done', function(e) {
     alert('hi');
  });

和聚合物：

<polymer-element name="foo-bar" attributes="url succEventTrigger">
<template>
      <core-ajax id="ajax" method="POST" 
      url="{{url}}" 
      contentType="application/json"
      handleAs="json" 
      on-core-response="{{handleResponse}}"></core-ajax>
</template>
<script>
    Polymer({
        succEventTrigger : '',
        handleResponse: function(e){
             var response = e.detail.response;
             if (response.status === 'success') {
                 // trigger callback event with parameter if needed
                 this.fire(succEventTrigger, { param : value });
             }
         }
    });
</script>
</polymer-element>

Answer 2

尝试将this.fire(succCallback);替换为this.fire(succCallback());。

Answer 3

编辑：我意识到迟到几分钟我的初步回复错过了实际的失败点。聚合物元素定义很好，但是它的使用需要包装在模板中，这样你就可以这样做：

<body>
<template is="auto-binding">
    <foo-bar url="/api/getdata" succCallback="{{func}}"></foo-bar>
</template>
<script>
  var scope = document.querySelector('template[is=auto-binding]');

  scope.func = function (whatever) {
    console.log('yay!');
  };
</script>
</body>

下面的原始回复可能仍然有用 - 尤其是在使用回调的情况下。

使用＆＃39;发布＆＃39;阻止而不是属性...呃，属性（我现在意识到这不是导致错误的原因）：

    <polymer-element name="foo-bar">
<template>
      <core-ajax id="ajax" method="POST" 
      url="{{url}}" 
      contentType="application/json"
      handleAs="json" 
      on-core-response="{{handleResponse}}"></core-ajax>
</template>
<script>
    Polymer({
        publish: {
            url: undefined,
            succCallback: undefined,
        },
        ready: function(){
            this.url = this.url || "some default";
            this.succCallback = this.succCallback || function(){};
        },
        handleResponse: function(e){
             var response = e.detail.response;
             if (response.status === 'success') {
                 // call succCallback
                 this.succCallback();
             }
         }
    });
</script>
</polymer-element>

我实际上是在寻找答案，这是一种在聚合物中具有牵引力的模式，还是不鼓励？＆＃39;。由于在Communication and Messaging docs中甚至没有提及使用回调，我很好奇。

Answer 4

创建自定义聚合物元素的实例时，需要将参数括号添加到作为属性传递的函数名称。

即。而不是：

<foo-bar url="/api/getdata" succCallback="func"></foo-bar>

做的：

<foo-bar url="/api/getdata" succCallback="func()"></foo-bar>

根据经过验证的真实（但有点不合时宜）：

<body onload="handleLoad()"></body>

如何将函数属性添加到聚合物元素

4 个答案: