Come aggiungere l'attributo di funzione all'elemento polimerico

Voglio creare un elemento polimerico con attributo di funzione, che verrà chiamato quando si ottiene una risposta positiva.Come aggiungere l'attributo di funzione all'elemento polimerico

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

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

ho provato questo:

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

Non funziona. Come posso chiamare questa funzione succCallback? Grazie!

fonte

2015-01-02 Jie

Credo che nessuno modo, perché

attributes attr consuma solo stringhe.

soluzione praticabile potrebbe essere la seguente:

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

Quindi, fissare ascoltatore al polimero e prendere succEventTrigger

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

e polimeri:

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

fonte

2015-01-02 22:55:20

Grazie! Sta funzionando! Ho scoperto che funziona anche se chiamo succCallback come questo 'windows [succCallback]();', ma non so se c'è qualche effetto collaterale che usa questo. – Jie

È vero che funziona bene, ma in particolare ho evitato quell'approccio in quanto implica l'interazione con l'oggetto finestra .. che non è buono per impostazione predefinita :) –

Provare a sostituire this.fire(succCallback); con this.fire(succCallback());.

fonte

2015-01-02 21:52:11 SalmonKiller

Non funziona neanche. Hai ricevuto questo errore: Uncaught TypeError: string non è una funzione – Jie

Edit: ho realizzato un Qualche minuto di ritardo che la mia risposta iniziale ha mancato il vero punto di errore. La definizione elemento polimero è bene, ma l'uso di esso deve essere avvolto in un modello, in modo che si può fare qualcosa di simile:

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

La risposta originale al di sotto potrebbe essere ancora disponibile - soprattutto dove il callback è Usato.

Utilizzando il blocco 'pubblicare' al posto degli attributi ... ehm, attributo (mi rendo conto ora che questo non era la causa dell'errore):

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

mi è stato effettivamente alla ricerca di una risposta a 'è questo un modello con trazione in Polimero, o è scoraggiato?'. Poiché l'uso di callback non è nemmeno menzionato nel numero Communication and Messaging docs, sono piuttosto curioso.

fonte

2015-01-18 03:20:21 ggranum

Quando si crea un'istanza del proprio elemento polimerico personalizzato, è necessario aggiungere parentesi di parametri ai nomi di funzione passati come attributi.

cioè invece di:

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

fare:

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

secondo il vero e provato (ancora alquanto fuori moda):

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

fonte

2015-05-15 13:07:32 benjineer

Come aggiungere l'attributo di funzione all'elemento polimerico

risposta

Problemi correlati