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

How to add function attribute to polymer element

本文关键字：添加 功能 属性 元素 聚合物      更新时间：2023-09-26

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

<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 函数？谢谢！

我认为不可能，因为

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>

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

编辑：我晚了几分钟才意识到我最初的回复错过了实际的失败点。聚合物元素的定义很好，但是它的使用需要包装在模板中，以便您可以执行以下操作：

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

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

使用"发布"块而不是属性...er，属性（我现在意识到这不是错误的原因）：

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

我实际上正在寻找"这是聚合物中具有牵引力的模式，还是不鼓励？由于通信和消息传递文档中甚至没有提到回调的使用，我很好奇。

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

即代替：

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

做：

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

根据久经考验的真实（但有些不合时宜）：

<body onload="handleLoad()"></body>
相关文章：