javascript - 如何为 polymer 元素添加功能属性

Question

我想创建一个具有函数属性的 polymer 元素，当获得成功响应时将调用它。

<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>

然后，将监听器附加到 polymer 并捕获 succEventTrigger

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

和 polymer :

<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>