定製的聚合物成分之間沒有通信

我已經寫有多個較小定製組件設計爲整個過程的一個特定步驟的單個自定義聚合物組分。元素應該請求特定的輸入參數，並且每個步驟都建立在前面的步驟之上。最終組件包含從API中檢索的結果，該API接受從第一步收集的輸入。定製的聚合物成分之間沒有通信

我的問題是，我不能從一個組件到下一個信息。我幾乎在每個使用的組件中都有這個問題，所以我懷疑我想要這樣做的方式是問題。

第一個問題是我需要從API中檢索可能性列表，並在多個子組件的下拉列表中顯示此列表。我把這個名單在聚合物屬性，但自動捆綁不火和數據的變化不能正常向下傳播到子組件（如果有的話）。我定義了一些可以獲取數據的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>

我的網址是直截了當並將它轉換成一個數組就好了，但模板活動不重新加載和編輯，如果我添加項目到活動數組。我怎麼能做到這一點？

，我要面對越來越組件的「結果」的第二個問題。 我有一個表單，我希望用戶指定時間。爲此，我使用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>

和下面的聚合物的性能顯示既定義了這些功能和檢索的對話框和結果：

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

控制檯輸出變成了空的（如在'時間活動：'）。有沒有人看到我在做什麼錯了？如果您需要查看更多信息，請查看我可能在此丟失的內容。謝謝。

來源

2015-10-07 Diëgo

有關活動啄 - 你應該使用聚合物的PUSH，POP等，見https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat。或者手動調用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>

來源

2015-10-08 08:06:50 user656449

這正是我用來做時間選擇的選擇器。我會推一試 - 在創建活動時沒有嘗試初始化所有屬性 - 將嘗試並回報。 –

附錄：我用來保存結果錯誤。我必須做'this.activity.time = dialog.time'。儘管push和notifyPath不執行他們的廣告功能。我以前也嘗試過，他們從來沒有爲我工作過。有什麼我應該注意確保它能按設計工作嗎？ –

對不起，我希望紙張時間選擇器是一個鐵輸入，但它不是一個。所以你應該手動更新模型數據。如果您需要就地驗證或「實時」，您可以使用監聽器。 – user656449

定製的聚合物成分之間沒有通信

回答

相關問題