如何獲取dom-repeat中顯示的第一個元素？

我想顯示dom-repeat的第一個元素作爲窗體上的顯示。和其他應該通過點擊按鈕添加。這種情況在聚合物中可能如何。如圖所示。如何獲取dom-repeat中顯示的第一個元素？

如上圖像室＃1中示出應該默認和從室溫＃2是顯示應在點擊按鈕來添加。

代碼 -

<form is="iron-form" id="form" method="post" action="/form/handler"> 
    <template is='dom-repeat' items='{{ rooms }}'> 
     <div class="head"> 
      <paper-item> 
      <div id="line"><span>Room# {{displayIndex(index)}}</span></div> 
      <template is='dom-if' if='{{displayIndex != 1}}'> 
       <paper-button toggles class=button on-click="deleteRoom"><img src="trash.png" height="20px" width="20px"></paper-button> 
      </template> 
      </paper-item> 
     </div> 
     <choice-form room="{{displayIndex(index)}}">{{ item.room }}</choice-form> 
    </template> 
</form>

來源

2017-02-13 Ankita

這是不夠的信息，以幫助您解決方案 – Mephiztopheles

請張貼代碼。 –

我有我自己的問題的答案。你只需在ready方法中調用add函數一次。以下是代碼。

ready: function() { 
     // For default first Room. 
     this.push('rooms', { room: "" }); 
     this.roomCount = this.roomCount + 1; 
}, 
addRoom: function() { 
     this.push('rooms', { room: "" }); 
     this.roomCount = this.roomCount + 1;   
},

來源

2017-02-16 11:19:53 Ankita

我將創建一個新的數組只包含第一間（＃1）和按鈕點擊添加會議室＃2到數組，然後在dom-repeat使用這個數組而不是rooms。

來源

2017-02-13 07:09:55

對不起，沒時間了。按鈕點擊時使用2個數組並逐個複製項目有什麼問題？ –

非常感謝。它非常有幫助 – Ankita

不是很清楚，看起來你只需要做

var myRommObject = {....your-properties}; 
this.push('rooms',myRommObject);

您的按鈕的事件處理中單擊看看here和here

來源

2017-02-13 10:28:25

你舉的例子裏含有dom-if綁定表達式（即if="{{displayIndex != 1}}"），但目前聚合物中不支持該功能。您需要改用計算的binding/property。

我假設rooms最初包含一個項目，並且有一個按鈕可將更多項目添加到數組中。

這是代碼會是什麼樣子：

HTMLImports.whenReady(() => { 
 
    Polymer({ 
 
    is: 'x-foo', 
 
    properties: { 
 
     rooms: { 
 
     type: Array, 
 
     value:() => ['King'] 
 
     }, 
 
     _isDeleteHidden: { 
 
     type: Boolean, 
 
     computed: '_lte(rooms.length, 1)' 
 
     } 
 
    }, 
 
    _lte(a, b) { 
 
     return a <= b; 
 
    }, 
 
    _inc(index) { 
 
     return index + 1; 
 
    }, 
 
    _deleteRoom(e) { 
 
     this.splice('rooms', e.model.index, 1); 
 
    }, 
 
    _addRoom() { 
 
     this.push('rooms', this._getRandomRoom()); 
 
    }, 
 
    _getRandomRoom() { 
 
     const ROOMS = ['King', 'Queen', 'Double', 'Standard']; 
 
     return ROOMS[randInt(0, ROOMS.length)] 
 
    } 
 
    }); 
 
}); 
 

 
function randInt(min, max) { 
 
    min = Math.ceil(min); 
 
    max = Math.floor(max); 
 
    return Math.floor(Math.random() * (max - min)) + min; 
 
}

<head> 
 
    <base href="https://polygit.org/polymer+1.7.1/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-button/paper-button.html"> 
 
    <link rel="import" href="paper-item/paper-item.html"> 
 
    <link rel="import" href="paper-icon-button/paper-icon-button.html"> 
 
    <link rel="import" href="iron-icons/iron-icons.html"> 
 
</head> 
 
<body> 
 
    <x-foo></x-foo> 
 

 
    <dom-module id="x-foo"> 
 
    <template> 
 
     <paper-button on-tap="_addRoom">Add Room</paper-button> 
 
     <template is="dom-repeat" items="[[rooms]]"> 
 
     <paper-item> 
 
      <span>Room #[[_inc(index)]] ([[item]])</span> 
 
      <paper-icon-button hidden="[[_isDeleteHidden]]" icon="delete" on-tap="_deleteRoom"></paper-icon-button> 
 
     </paper-item> 
 
     </template> 
 
    </template> 
 
    </dom-module> 
 
</body>

codepen

來源

2017-02-14 03:49:24 tony19

感謝您的回答，我按照您的建議使用隱藏的刪除按鈕，這是工作。 – Ankita

回答

相關問題