Question

我希望将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>

Answer 1

我会创建一个只包含第一个房间（＃1房间）的新数组，然后在按钮上单击将该房间＃2添加到该数组，然后在dom-repeat而不是rooms中使用此数组。

Answer 2

您的示例包含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

Answer 3

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

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

单击按钮的事件处理程序内的

看看here和here

Answer 4

我得到了自己问题的答案。你只需要在ready方法中调用一次add function。以下是代码。

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

如何在dom-repeat中显示第一个元素？

4 个答案: