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

中所述

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

2 个答案: