文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >dom-repeat items属性上的计算绑定

问dom-repeat items属性上的计算绑定
EN

Stack Overflow用户
提问于 2016-06-07 02:30:41
回答 1查看 565关注 0票数 0

我正在构建一个相对简单的页面，其中动态创建了一系列纸质标签和核心页面。这个想法是用户输入一张纸-输入-指示所需的纸张标签和核心页面的数量，这些是使用dom- -through‘s自动添加的。这个功能的第一部分已经实现，但我对第二部分有问题。

在纸页中，我需要3个纸质输入和按钮，这样用户就可以创建/删除新的输入。我的想法是实现一个函数，它将按照用户的指示创建许多数组，并用输入填充它们。

我已经实现了一个计算绑定来滚动浏览每个数组，但不起作用。创建X iron-pages时没有问题，但没有添加任何输入。

代码如下：

代码语言：javascript
复制
    <!DOCTYPE html>
<html>
<head>
  <!-- Dependencias/Elementos -->
  <link rel="import" href="../../bower_components/polymer/polymer.html">
  <link rel="import" href="../../bower_components/iron-label/iron-label.html">
  <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

  <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.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-tabs/paper-tabs.html">

</head>

<dom-module id="protocolo-app">
    <style>
      :host {
        display: block;
      }
      .card {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        padding: 16px;
        margin: 24px;
        border-radius: 5px;
        background-color: #fff;
        color: #757575;
      }
      .inputGray{
        background-color: #555;
        color: #fff;
      }
      h1 {
        font-size: 22px;
        margin: 16px 0;
        color: #212121;
      }
      paper-tabs[grayTab]{
        background: #eee;
        margin-top: 3%;
        margin-bottom: 3%; 
      }
      .flex {
        @apply(--layout-horizontal);
      }
      .flex-horizontal-with-ratios {
        @apply(--layout-horizontal);
      }
      .flexchild {
        @apply(--layout-flex);
      }
      .flex2child {
        @apply(--layout-flex-2);
      }
      .flex3child {
        @apply(--layout-flex-3);
      }
      .flex-center-justified {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
      }
      .flex-equal-justified {
        @apply(--layout-horizontal);
        @apply(--layout-justified);
      }
      .flex-equal-around-justified {
        @apply(--layout-horizontal);
        @apply(--layout-around-justified);
      }
      paper-button.gray {
      background: #eee;
      color: #000;
      }
      paper-button.gray:hover {
      background: #555;
      }
      paper-button[disabled],
      paper-button[toggles][active] {
      background: red;
      }
    </style>

  <template> 
    <div class="card">
      <h1>Alta de Protocolos</h1>
      <div class="cointainer flex-horizontal-with-ratios">
        <div class="flex2child">
          <iron-label>Nombre de Protocolo</iron-label>
        </div>
        <div class="flexchild">
          <iron-label>Núm. Visitas</iron-label>
        </div>
      </div>
      <div class="cointainer flex-horizontal-with-ratios">
        <div class="flex2child">
          <paper-input name="protocol" id="protocol" value="{{protocol}}"></paper-input>
        </div>
        <div class="flexchild">
          <paper-input name="visit" id="visit" value="{{visits}}" prevent-invalid-input allowed-pattern="[0-9]" on-change="visitChanged"></paper-input>
        </div>
      </div>
        <!-- Tab's Element-->
        <paper-tabs selected="{{selected}}" scrollable no-slide noink grayTab>
          <template id="tabs" is="dom-repeat" items="{{tabArray}}">
           <paper-tab>{{item.value}}</paper-tab>
          </template>
        </paper-tabs>
        <!-- /Tab's Element-->
        <!-- iron-pages Element's-->
        <iron-pages selected="{{selected}}">
          <template id="pages" is="dom-repeat" items="{{tabArray}}">
            <div>
              <template id="inputs" is="dom-repeat" items="{{concat(tabArray.array, index)}}">
                <div class="container flex">
                  <div>
                    <paper-input id="input" value= "{{item.value}}" placeholder="{{item.placeholder}}"></paper-input>
                  </div>
                  <div>
                    <paper-button class="gray" raised on-tap="delInput">Eliminar</paper-button>
                  </div>
                </div>
              </template>
              <div class="container flex">
                <paper-button class="gray" raised on-tap="addInput">Agregar</paper-button>
              </div>
            </div>
          </template>
        </iron-pages>
        <!-- /iron-pages Element's-->
      <div class="container flex-center-justified">
        <div>
          <paper-button class="gray" raised>Cancelar</paper-button>
          <paper-button class="gray" raised>Guardar</paper-button>
        </div>
      </div>
    </div>
  </template>
</don-module>

  <script>
    Polymer({

      is: 'protocolo-app',

      properties: {
        protocol: {
          type: String,
          value: ""
        },
        visits:{
          type:Number,
          value: 3,
          notify: true
        },
        tabArray: {
          type: Array,
          value: [{value:"visita1"},{value:"visita2"},{value:"visita3"}]
        },
        inputArray: {
          type: Array,
          value: [{value:"",placeholder:"t1_input1"},{value:"",placeholder:"t1_input2"},{value:"",placeholder:"t1_input3"}]
        }
      },

      //funcion que agrega input's
      addInput: function(){
        this.push('inputArray0',{value:"",placeholder:""});
      },
      //funcion que elimina input's
      delInput: function(e){
        this.splice('inputArray0',e.model.index,1);
      },
      creaArrayTabs: function(e){
         console.log(this.value);
      },
      concat: function(v1, v2){
        var res = v1 + v2;
        alert("Concatenacion: " + res);
        return v1 + v2;
      },
      //funcion que carga los arrays necesarios para la aplicacion
      visitChanged: function(e){
        //alert("Valor: " + this.$.visit.value);
        //limpiamos el array para agregar las nuevas tabs
        this.splice('tabArray',e.model);
        //asignamos a la variable max el valor del input
        var max = this.$.visit.value;
        for (i = 0; i < max; i++) { 
          //alert("Prueba " + i);
          this.push('tabArray',{value:"Visita " + i, array:"inputArray"});
          this['inputArray'+ i] = [];
          for (j = 0; j < 3; j++) {
            this.push('inputArray' + i,{value:"",placeholder:"t"+ i + "_input"+j});
          }
        }
      }
    });
  </script>
polymer
EN

回答 1

Stack Overflow用户

发布于 2016-06-11 03:53:18

经过几次尝试，唯一的解决方案是迁移到多维数组结构，并修改add和del函数以与新的数组结构交互。

下面是最终的代码：

代码语言：javascript
复制
    <!DOCTYPE html>
<html>
<head>
  <!-- Dependencias/Elementos -->
  <link rel="import" href="../../bower_components/polymer/polymer.html">
  <link rel="import" href="../../bower_components/iron-label/iron-label.html">
  <link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

  <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.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-tabs/paper-tabs.html">

</head>

<dom-module id="protocolo-app">
    <style>
      :host {
        display: block;
      }
      .card {
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        padding: 16px;
        margin: 24px;
        border-radius: 5px;
        background-color: #fff;
        color: #757575;
      }
      .inputGray{
        background-color: #555;
        color: #fff;
      }
      h1 {
        font-size: 22px;
        margin: 16px 0;
        color: #212121;
      }
      paper-tabs[grayTab]{
        background: #eee;
        margin-top: 3%;
        margin-bottom: 3%; 
      }
      .flex {
        @apply(--layout-horizontal);
      }
      .flex-horizontal-with-ratios {
        @apply(--layout-horizontal);
      }
      .flexchild {
        @apply(--layout-flex);
      }
      .flex2child {
        @apply(--layout-flex-2);
      }
      .flex3child {
        @apply(--layout-flex-3);
      }
      .flex-center-justified {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
      }
      .flex-equal-justified {
        @apply(--layout-horizontal);
        @apply(--layout-justified);
      }
      .flex-equal-around-justified {
        @apply(--layout-horizontal);
        @apply(--layout-around-justified);
      }
      paper-button.gray {
      background: #eee;
      color: #000;
      }
      paper-button.gray:hover {
      background: #555;
      }
      paper-button[disabled],
      paper-button[toggles][active] {
      background: red;
      }
    </style>

  <template> 
    <div class="card">
      <h1>Alta de Protocolos</h1>
      <div class="cointainer flex-horizontal-with-ratios">
        <div class="flex2child">
          <iron-label>Nombre de Protocolo</iron-label>
        </div>
        <div class="flexchild">
          <iron-label>Núm. Visitas</iron-label>
        </div>
      </div>
      <div class="cointainer flex-horizontal-with-ratios">
        <div class="flex2child">
          <paper-input name="protocol" id="protocol" value="{{protocol}}"></paper-input>
        </div>
        <div class="flexchild">
          <paper-input name="visit" id="visit" value="{{visits}}" prevent-invalid-input allowed-pattern="[0-9]" on-change="visitChanged"></paper-input>
        </div>
      </div>
      <paper-input id="selection" hidden="true" value="{{selected}}"></paper-input>
        <!-- Tab's Element-->
        <paper-tabs selected="{{selected}}" scrollable no-slide noink grayTab>
          <template id="tabs" is="dom-repeat" items="{{tabArrayTest}}" as="tab">
           <paper-tab>{{tab.tabName}}</paper-tab>
          </template>
        </paper-tabs>
        <!-- /Tab's Element-->
        <!-- iron-pages Element's-->
        <iron-pages selected="{{selected}}">
          <template id="pages" is="dom-repeat" items="{{tabArrayTest}}" as="tabInput">
            <div>
              <template id="inputs" is="dom-repeat" items="{{tabInput.inputs}}" as="inp">
                <div class="container flex">
                  <div>
                    <paper-input id="input" value= "{{inp.value}}" placeholder="{{inp.placeholder}}"></paper-input>
                  </div>
                  <div>
                    <paper-button class="gray" raised on-tap="delInput">Eliminar</paper-button>
                  </div>
                </div>
              </template>
              <div class="container flex">
                <paper-button class="gray" raised on-tap="addInput">Agregar</paper-button>
              </div>
            </div>
          </template>
        </iron-pages>
        <!-- /iron-pages Element's-->
      <div class="container flex-center-justified">
        <div>
          <paper-button class="gray" raised>Cancelar</paper-button>
          <paper-button class="gray" raised>Guardar</paper-button>
        </div>
      </div>
    </div>
  </template>
</don-module>

  <script>
    Polymer({

      is: 'protocolo-app',

      properties: {
        protocol: {
          type: String,
          value: ""
        },
        visits:{
          type:Number,
          value: 3,
          notify: true
        },
        tabArray: {
          type: Array,
          value: [{value:"visita1"},{value:"visita2"},{value:"visita3"}]
        },
        tabArrayTest: {
          type: Array,
          value: [{
                    tabName:"visita1",
                    inputs: [{value:"", placeholder:"t1_input1"},{value:"", placeholder:"t1_input2"},{value:"", placeholder:"t1_input3"}]

                  },
                  {
                    tabName:"visita2",
                    inputs: [{value:"", placeholder:"t2_input1"},{value:"", placeholder:"t2_input1"},{value:"", placeholder:"t2_input1"}]
                  },
                  {
                    tabName:"visita3",
                    inputs: [{value:"", placeholder:"t3_input1"},{value:"", placeholder:"t3_input1"},{value:"", placeholder:"t3_input1"}]
                  }]
        },
        selected:{
          type: Number,
          value: 0,
        },
        inputArray: {
          type: Array,
          value: [{value:"",placeholder:"t1_input1"},{value:"",placeholder:"t1_input2"},{value:"",placeholder:"t1_input3"}]
        }
      },

      observers: [
            'test(tabArrayTest.*)'
        ],

      //funcion que agrega input's
      addInput: function(){
        var sel = this.$.selection.value;
        //alert("Tab Seleccionado: " + sel);
        this.push('tabArrayTest.'+ sel + '.inputs',[{value:"",placeholder:""}])[0];
      },
      test: function(){
        console.log("Se modifico el array");
      },
      //funcion que elimina input's
      delInput: function(e){
          var sel = this.$.selection.value;
        this.splice('tabArrayTest.'+ sel + '.inputs',e.model.index,1);
      },
      creaArrayTabs: function(e){
         console.log(this.value);
      },
      concat: function(v1, v2){
        var res = v1 + v2;
        alert("Concatenacion: " + res);
        //return v1 + v2;
      },
      //funcion que carga los arrays necesarios para la aplicacion
      visitChanged: function(e){
        //alert("Valor: " + this.$.visit.value);
        //limpiamos el array para agregar las nuevas tabs
        this.splice('tabArrayTest',e.model);
        //asignamos a la variable max el valor del input
        var max = this.$.visit.value;
        for (i = 0; i < max; i++) { 
          //alert("Prueba " + i);
      var k = i +1;
          this.push('tabArrayTest',{tabName:"Visita " + k, inputs:[{value:"", placeholder:"t"+ k + "_input1"},{value:"", placeholder:"t"+ k + "_input2"},{value:"", placeholder:"t"+ k + "_input3"}]});
          //this['inputArray'+ i] = [];
          //for (j = 0; j < 3; j++) {
          //  this.push('inputArray' + i,{value:"",placeholder:"t"+ i + "_input"+j});
          //}
        }
      }
    });
  </script>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37664470

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档