Как получить первый элемент, отображаемый в 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

Пожалуйста, введите код. –

я получил ответ на свой вопрос. Вам просто нужно вызвать функцию 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}}"), но это в настоящее время не поддерживается в Polymer. Вместо этого вам нужно будет вычислить 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

Как получить первый элемент, отображаемый в dom-repeat?

ответ

Смежные вопросы