如何为聚合物元素添加功能属性

Question

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

<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

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

Answer 2

我觉得不行，因为

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

下面的原始回复可能仍然有用 - 特别是在使用回调的地方。

使用 'publish' 块而不是属性...呃，属性（我现在意识到这不是错误的原因）：

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

我实际上是在寻找 'is this a pattern with traction in Polymer, or is it discouraged?' 的答案。由于 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>

如何为聚合物元素添加功能属性

How to add function attribute to polymer element

javascript

polymer