如何为Polymer元素添加功能属性

Question

如何为Polymer元素添加功能属性

4

我想创建一个带有功能属性的聚合元素，在成功响应时调用该属性。

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

- Jie

4个回答

0

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

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

以下原始回复可能仍然有帮助 - 特别是在使用回调函数的情况下。

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

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

我实际上正在寻找一个答案：“在Polymer中，这是一种有用的模式还是不被鼓励的？”由于回调函数的使用甚至没有在通信和消息文档中提到，我非常好奇。

- ggranum

0

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

例如，而不是：

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

做：

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

根据经过试验和证实的（尽管有些不时髦）：

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

- Benjineer

0

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

- SalmonKiller

1

也不起作用。出现了这个错误：未捕获的类型错误：字符串不是一个函数。 - Jie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eugene P. · Accepted Answer

我认为没有办法，因为 attributes 属性只接受字符串。一个可行的解决方案可能是以下内容：

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

然后，将监听器附加到聚合物上，并捕获。

 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>