如何使用 javascript 函数创建可以调用 javascript 函数的聚合物元素

Question

我有一个对象数组，我想将每个对象渲染成聚合物线卡元素。每个元素被点击时，我想调用一个javascript函数。

我使用了一个简单的循环来使用 javascript 创建元素，但是当我单击/点击元素时没有任何反应。

这是我创建元素的 JS 函数的一部分：

 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");
 }

我正在尝试在更大的自定义聚合物元素中渲染卡片。卡片渲染得很好，但是当我点击它们时，我什么也得不到。

如果卡片元素已经存在于文档中，而不是像我试图做的那样被 JS 插入，那么它工作正常。只有当我尝试通过 JS 插入完全相同的标记时，我才会遇到这个问题。

Answer 1

您似乎正在为此而努力。为什么不通过模板做到这一点？

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

您的聚合物元素可能如下所示：

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

Answer 2

如果您想通过带有聚合物数据绑定的脚本插入 HTML，您需要使用 injectBoundHTML 以便聚合物框架知道新的绑定 如this page中所述