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

Question

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

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

这是我创建元素的 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 函数的聚合物元素

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

javascript

function

dom

polymer

custom-element