CODEWITHSUNDEEP
javascriptfunctiondompolymercustom-element
Akil A.
Akil A.

Reputation: 3

How can I use a javascript function to create polymer elements which can call javascript functions

I have an array of objects, each of which I want to render into polymer cord-card element. Each element when tapped, i'd like to call a javascript function.

I've used a simple loop to create the elements with javascript however nothing happens when I click/tap the element.

Here is part of my JS function to create the element:

 createElements: function() {

 ...

 var count = results.length;
 var custom = "";

          for (var a = 0; a < count; a++)//places results in cards
          {
            custom += '<core-card id="core_card10" on-tap="{{ test }}" horizontal layout>';
            custom += '<core-item id="core_item4" label="' + results[a].account_number + '" horizontal center layout one flex center-justified></core-item>';
            custom += '<core-item id="core_item5" label="' + results[a].given_name + '" onclick="horizontal" center layout one flex center-justified horizontal></core-item>';
            custom += '<core-item id="core_item6" label="' + results[a].family_name + '" horizontal center layout one flex center-justified></core-item>';
            custom += '<core-item id="core_item7" icon="mail" label="' + results[a].email + '" horizontal center layout one flex center-justified></core-item>';
            custom += '<core-item id="core_item8" icon="perm-phone-msg" label="' + results[a].contact_numbers.main + '" horizontal center layout one flex center-justified></core-item>';
            custom += '</core-card>';
          }

          this.$.result.innerHTML = custom;//places card elements on page

 },

 test: function() {
 alert("works");
 }

I'm trying to render the cards within a larger custom polymer-element. The cards render fine, but when I click on them I get nothing.

If however the card element already existed within the document as opposed to being inserted by JS like i'm trying to do, then it works fine. Only when I try to insert the very same markup by JS do I have this issue.

Upvotes: 0

Views: 503

Answers (2)

BLASTOR
BLASTOR

Reputation: 316

If you want to insert HTML by script with polymer data binding, you need to use injectBoundHTML so that the polymer framework knows about the new bindings As explained in this page

Upvotes: 0

Marc Byfield
Marc Byfield

Reputation: 510

You seem to be trying to brute for this. Why not do this via a template?

<template repeat="result in results">
   <core-card on-tap="{{ test }}" horizontal layout>
    <core-item label="{{result.account_number}}" horizontal center layout one flex center-justified></core-item>
    <core-item label="{{result.given_name}}" onclick="horizontal" center layout one flex center-justified horizontal></core-item>
    <core-item label="{{result.family_name}}"horizontal center layout one flex center-justified></core-item>
    <core-item icon="mail" label="{{result.email}}"horizontal center layout one flex center-justified></core-item>
    <core-item icon="perm-phone-msg" label="{{result.contact_number.main}}" horizontal center layout one flex center-justified></core-item>
   </core-card>
</template>

your polymer element could then look like:

    <link rel="import" href="../../../bower_components/polymer/polymer.html">

<polymer-element name="yo-list" attributes="">
  <template>
    <link rel="stylesheet" href="yo-list.css">
      <template id="result" repeat="{{ result in results }}">
        <core-card on-tap="{{ test }}" horizontal layout>
          <core-item label="{{result.account_number}}" horizontal center layout one flex center-justified></core-item>
          <core-item label="{{result.given_name}}" onclick="horizontal" center layout one flex center-justified horizontal></core-item>
          <core-item label="{{result.family_name}}"horizontal center layout one flex center-justified></core-item>
          <core-item icon="mail" label="{{result.email}}"horizontal center layout one flex center-justified></core-item>
          <core-item icon="perm-phone-msg" label="{{result.contact_number.main}}" horizontal center layout one flex center-justified></core-item>
       </core-card>
      </template>
  </template>
  <script>
    (function () {
      Polymer({
        test: function(){
          console.log("worked!");
        },
        ready: function () {
          this.results = [
            {
              account_number: "19123281",
              given_name: "John",
              family_name: "Doe",
              email: "[email protected]",
              contact_number: {
                main: "555-5555"
              }
            },{
              account_number: "97854654",
              given_name: "Mary",
              family_name: "Sue",
              email: "[email protected]",
              contact_number: {
                main: "555-5555"
              }
            },{
              account_number: "87984561",
              given_name: "Gary",
              family_name: "Stue",
              email: "[email protected]",
              contact_number: {
                main: "555-5555"
              }
            }
          ];
        }
      });
    })();
  </script>
</polymer-element>

Upvotes: 1

Related Questions