自定义聚合物组件之间无通信-Java 学习之路

我编写了一个自定义聚合物组件，它具有多个较小的 custom components ，设计用于整个过程的一个特定步骤 . 这些元素应该请求特定的输入参数，每个步骤都 Build 在前面的步骤之上 . 最终组件包含从API接收的结果，该API接受从第一步收集的输入 .

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

第一个问题是我需要从API中检索可能性列表，并在多个 child components 的下拉列表中显示此列表 . 我将此列表放在 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>

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

我面临的第二个问题是获得 'result' of a component. 我有一个表单，我希望用户指定时间 . 为此，我正在使用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 activity：'） . 有谁看到我做错了什么？如果您需要更多信息，请在此处查看我可能缺少的信息 . 谢谢 .

1 回答

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>xxz</title>
    <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>

    <link rel="import" href="./bower_components/polymer/polymer.html">


    <link rel="import" href="bower_components/paper-time-picker/paper-time-picker.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="bower_components/neon-animation/animations/scale-up-animation.html">
    <link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">

    <dom-module id="my-activity">
        <style>
            :host{
                display: block;
            }
        </style>
        <template>
            Activity <span>{{activity.name}}</span>
            <paper-button on-click=showAttachedDialog>Time dialog <span>{{activity.time}}</span></paper-button>

            <paper-dialog id="timeDialog" modal class="paper-time-picker-dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
                <h2>Activity name <span>{{activity.name}}</span></h2>

                <!-- from https://github.com/bendavis78/paper-time-picker -->
                <paper-time-picker id="startTimePicker"></paper-time-picker>
                <!--unfortunately  paper-time-picker is not a iron-input (is="iron-input") so you can't jut bind to its value-->
                <!--start time: <paper-input id="time" value="{{activity.time}}"></paper-input>-->

                <div class="buttons">
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button dialog-confirm autofocus on-tap="confirmTime">OK</paper-button>
                </div>
            </paper-dialog>
        </template>
        <script>
            HTMLImports.whenReady(function () {
                Polymer({
                    is: "my-activity",
                    activity: Object,
                    listeners: {
                        'startTimePicker.time-changed': '_onTimeChanged'
                    },

                    //this is not needed if time is copied in confirmTime
                    _onTimeChanged: function(){
                        if (this.activity) {//first event is fired before activity is set
                            console.log("time activity: " + this.activity.time+' startTimePicker.time='+ this.$.startTimePicker.time);
                            this.activity.time = this.$.startTimePicker.time;
                        }
                    },

                    showAttachedDialog: function (event /*id*/) {
//                        that's I can't comprehend
//                        var button = this.$$(id);
//                        if (!button.hasAttribute('data-dialog')) {
//                            return;
//                        }
//
//                        var dialogId = '#' + button.getAttribute('data-dialog');
//                        var dialog = this.$$(dialogId);
//                        if (dialog) {
//                            dialog.open();
//                        }
                        this.$.timeDialog.open();
                    },
                    confirmTime: function () {
//                        this.activity['time'] = this.$$('#timePicker').time;
//                        this.notifyPath('activity.time', this.activity.time);

                        this.activity.time = this.$.startTimePicker.time;
                        console.log("time activity: " + this.activity.time+' startTimePicker.time='+ this.$.startTimePicker.time);

                    }
                })

            });
        </script>
    </dom-module>

    <dom-module id="my-element">
        <template>

            <paper-button on-click=handleTypesResponse>Kinda call ajax</paper-button>

            <section>
                <template is="dom-repeat" items="{{activities}}" as="activity">
                    <my-activity activity="{{activity}}" />
                </template>
            </section>

        </template>
        <script>
            HTMLImports.whenReady(function () {
                Polymer({
                    is: "my-element",

                    handleTypesResponse: function () {
                        this.splice('activities', 0, 3);
                        for (var i = 0; i < 10; i++) {
                            console.log('i=' + i);
                            this.push('activities', {name: 'name'+i, time: new Date()});

                        }
                    },

                    ready: function() {
                        this.activities = [];
                        this.push('activities', {name: 'name XXX', time: new Date()});
                        this.push('activities', {name: 'name YY', time: new Date()});
                        this.push('activities', {name: 'name ZZ', time: new Date()});
                    }
                });
            });
        </script>

    </dom-module>


</head>
<body>

<my-element></my-element>


</body>
</html>

回复于 2024-05-16T06:34:22+08:00

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

1 回答

相关问题