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

Question

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.

Answer 1

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: "john.doe@gmail.com",
              contact_number: {
                main: "555-5555"
              }
            },{
              account_number: "97854654",
              given_name: "Mary",
              family_name: "Sue",
              email: "mary.sue@gmail.com",
              contact_number: {
                main: "555-5555"
              }
            },{
              account_number: "87984561",
              given_name: "Gary",
              family_name: "Stue",
              email: "gary.stue@gmail.com",
              contact_number: {
                main: "555-5555"
              }
            }
          ];
        }
      });
    })();
  </script>
</polymer-element>