Question

我编写了一个自定义聚合物组件，该组件具有多个较小的自定义组件，专为整个过程的一个特定步骤而设计。这些元素应该请求特定的输入参数，每个步骤都建立在前面的步骤之上。最终组件包含从API中检索的结果，该API接受从第一步收集的输入。

我的问题是我无法从一个组件获取信息到下一个组件。我几乎在每个使用的组件中都有这个问题，所以我怀疑我想要的方式是问题。

第一个问题是我需要从API中检索可能性列表，并在多个子组件的下拉列表中显示此列表。我将此列表放在 Polymer 属性中，但自动绑定不会触发，并且数据更改未正确传播到子组件（如果有的话）。我定义了几个获取数据的iron-ajax元素，并且有一个带有子组件的模板，需要输出这些iron-ajax元素。

<template>
    <iron-ajax auto url="{{typesURL}}" handle-as="json"
      on-response="handleTypesResponse"></iron-ajax>
    <!-- more iron-ajax elements -->

    <section id="activities">
      <template is="dom-repeat" items="{{activities}}" as="activity">
        <my-activity activity="{{activity}}"
                      types="{{types}}" />
      </template>
    </section>
    <!-- more classic html elements -->
</template>

我的网址很简单，它可以很好地投射到数组中，但如果我将一个项目添加到活动数组中，则不会重新加载和编辑活动中的模板。我怎么能做到这一点？

我面临的第二个问题是获得＆＃39;结果＆＃39;一个组件。 我有一个表单，我希望用户指定时间。为此，我使用paper-time-picker。但是，在选择时间并返回到基础Web组件时，时间不会更改。这是定义对话框的代码：

<paper-dialog id="timeDialog" modal class="paper-time-picker-dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
  <h2>Start time <span>{{activity.name}}</span></h2>
  <paper-time-picker id="startTimePicker"></paper-time-picker>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus on-tap="confirmTime">OK</paper-button>
  </div>
</paper-dialog>

在Polymer属性下面定义的这些函数都显示和检索对话框和结果：

  showAttachedDialog: function (id) {
    var button = this.$$(id);
    if (!button.hasAttribute('data-dialog')) {
      return;
    }

    var dialogId = '#' + button.getAttribute('data-dialog');
    var dialog = this.$$(dialogId);
    if (dialog) {
      dialog.open();
    }
  },
  confirmTime: function () {
    this.activity['time'] = this.$$('#timePicker').time;
    this.notifyPath('activity.time', this.activity.time);

    console.log(this.activity);
    console.log("time activity: " + this.activity.time);
  },

控制台输出显示为空（如＆time活动：＆＃39;）。有谁看到我做错了什么？如果您需要更多信息，请在此处查看我可能缺少的信息。谢谢。

Answer 1

关于活动 - 你应该使用Polymer的push，pop等，请参阅https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat。或者manualy调用notifyPath。这有效：

image = new Image();
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg";

image.onload = function () {
    for (i = 1; i < 4; i++) {
        var ctx = document.getElementById('myCanvas-' + i).getContext('2d');

        var candidatePerformance = $('#performance' + i).val();
        var skillSet = $('#skillSet' + i).val();
        var verificationId = $('#verificationId' + i).val();

            ctx.drawImage(image, 0, 0);
            ctx.font = '15pt Arial ';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(skillSet, 10, 125);
            ctx.font = '15pt Arial';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(performance, 160, 155);
            ctx.font = '15pt Arial';
            ctx.fillStyle = "#000";
            ctx.textAlign = 'left';
            ctx.fillText(verificationId, 49, 185);

    }
}

自定义聚合物组件之间无通信

1 个答案: