Polymer 1.0處理動態創建的紙張輸入

Question

我有一張紙卡。

在其中使用添加按鈕，我可以動態添加2紙張輸入與檢查和刪除按鈕。

當我點擊刪除圖標時，該行中的輸入按鈕被刪除。

當我點擊檢查圖標時，如何獲取在兩個紙張輸入中輸入的數據？

注意**請記住它是動態創建的輸入框。

為了添加和刪除輸入框，我創建了一個帶有notify：true的數組，每個remove刪除一個索引，每個add都為數組添加一個索引。

幫助我。

添加輸入框的代碼：

 addFood:function(){ var tempArr=this.foodArray.slice(); var med= new Object(); med.name=""; med.unit=""; tempArr.push(med); this.foodArray=tempArr; }, 

 <paper-card heading= "Food Details"> <div class="card-content"> <template is="dom-repeat" items="{{foodArray}}" as="food"> <div class="horizontal layout"> <paper-input value="[[food.name]]"></paper-input> <paper-input value="{{food.unit}}"></paper-input> <paper-icon-button icon="icons:done" on-click="saveFood"></paper-icon-button> <paper-icon-button icon="icons:delete" on-click="deleteFood"></paper-icon-button> </div> </template> /div> <div class="card-actions"> <div class="horizontal layout" > <paper-button on-click="addFood">Add</paper-button> </div> </div> </paper-card> 

Answer 1

這可以通過為您需要查找的每個元素生成唯一ID來獲取用戶輸入值。

在dom-repeat模板中，您應該將id設置為元素。 根據元素類型使用生成的id，例如：

  <paper-icon-button id="{{_doneId(item.index)}}" on-click="done">

然后在你的on-click處理程序中，你可以得到目標的id，拉出item.index，生成生成的paper-input元素的id，查找該元素，然后讀取值。

您需要為數據模型添加“索引”字段。 一個簡單的整數索引值就可以了。 _doneId函數很簡單：

  _doneId: function(index) {
     return "_doneId" + index; 
  }

您需要從單擊處理程序中提取索引值並查找其他元素，例如，如下所示：

 done: function(e) {
    var id = e.target.getAttribute("id");
    var index = id.substr(7); // length of "_doneId" prefix
    var inputElem = this.$$("#" + this._inputId(index));
    // then access the inputElem value field, whatever that is
    console.log("the selected input value is: " + inputElem.value);
  }

Answer 2

我相信你要做的是，當點擊刪除時，從列表中刪除正確的項目。 這是通過在事件中使用單擊按鈕時的模型來完成的。 這是事件處理程序在模板重復中的結果。 這里解釋一下 。 HTML保持不變。 除了刪除解決方案之外，我還為您簡化了添加解決方案，以便它使用聚合物推送方法進行適當的元素通知：

自定義元素的腳本：

 addFood:function(){
    this.push('foodArray',{name:"",unit:""});
 },
 deleteFood:function(e){
    this.splice('foodArray',e.model.index,1);
 },
 saveFood:function(e) {
    // Save food from array with index: e.model.index
    // Data is accessible via this.foodArray[index], or just the current row: e.model.food.*
 },

這是一個工作樣本。

Answer 3

一種方法是，如果輸入的數據作為自定義屬性包含在完成按鈕中。

（您需要稍微重新組織輸入數組並將每個對象放在它自己的唯一ID中）

<paper-icon-button
            id='some_unique_id'
            icon="icons:done" 
            on-click="saveFood"
            name="{{food.name}}"
            unit="{{food.unit}}">
</paper-icon-button>

然后獲取自定義屬性值：

saveFood: function(e, detail, source) {

         var name = source.getAttribute('name');
         //use 'name' here
 }

....

解決這個問題的其他方法是考慮Polymer的數據綁定是動態的 。

你說“為了添加和刪除輸入框，我已經創建了一個數組......”，同樣的數組數據將在你在表單中更改時更新，如：

"med":[
    {"id_1":{"name":"Potato", "unit":"2kg"}}, 
    ...
  ]

接下來“saveFood”回調需要搜索'med'數組中的'Potato'對象。 要獲得更准確的搜索，您可以使用一些id來標記每個對象，然后按該ID進行搜索。