Question

我有这样的firebase结构：

  "workouts" : {
    "-KBJiXAHZV2B8sj9-FNk" : {
      "exercise_templates" : {
        "-KEsVT-ukSHMNevLFCa1" : true,
        "-KEslP747OVTdIYrNmCv" : true,
        "-KEslUBaSsmTOiVgV_h_" : true,
        "-KFpJyXrZwY_aPiDGGvw" : true
      },
      "name" : "ICF A"
    }
  }

  "exercise_templates" : {
    "-KEsVT-ukSHMNevLFCa1" : {
      "name" : "Overhead Press",
      "reps" : "5",
      "sets" : "5",
      "workouts" : {
        "-KBJiXAHZV2B8sj9-FNk" : true,
        "-KEsU4Q0irvgh33I20JF" : true
      }
    },

我试图遍历所有属于锻炼的exercise_templates：

            <template is="dom-repeat" items="[[workouts]]" as="workout">
              <paper-card heading="[[workout.name]]">
                <div class="card-content">
                  [[workout.__firebaseKey__]]

                  <template is="dom-repeat" items="[[workout.exercise_templates]]" as="template" handle-as="json">
                    {{template}}
                  </template>

                </div>
                <div class="card-actions">
                  <paper-button>Some action</paper-button>
                </div>
              </paper-card>
            </template>

但我明白了：

[dom-repeat::dom-repeat]: expected array for `items`, found Object {-KEsVT-ukSHMNevLFCa1: true, -KEslP747OVTdIYrNmCv: true, -KEslUBaSsmTOiVgV_h_: true, -KFpJyXrZwY_aPiDGGvw: true}

如何通过在锻炼中迭代exercise_templates来引用exercise_template？

自定义元素

<dom-module id="my-workout">
  <template>
    <template is="dom-bind">
      <style>
        :host {
          display: block;
        }

        span {
          @apply(--paper-font-body1);
        }
      </style>
      <firebase-collection
        limit-to-first="10"
        location="https://blazing-inferno-5257.firebaseio.com/workouts"
        data="{{workouts}}" keys="{{keys}}"></firebase-collection>
      <template is="dom-repeat" items="[[workouts]]" as="workout">
        <paper-card heading="[[workout.name]]">
          <div class="card-content">
            <template is="dom-repeat" items="[[_computeExerciseTemplates(workout)]]">
              <li>{{item}}</li>
            </template>
          </div>
          <div class="card-actions">
            <paper-button>Do workout</paper-button>
          </div>
        </paper-card>
      </template>
    </template>
  </template>

  <script>
    (function() {
      'use strict';

      Polymer({
        is: 'my-workout',
        _computeExerciseTemplates: function(workout) {
          return Object.keys(workout.exercise_templates);
        },

        ready: function() {
        }
      });
    })();
  </script>
</dom-module>

Answer 1

假设exercise_templates无法更改为简单数组（或者它不合适），您可以使用computed binding exercise_templates获取其密钥：

<template is="dom-repeat" items="[[_computeExerciseTemplates(workout)]]">
  <li>{{item}}</li>
</template>

其中_computeExerciseTemplates定义为：

<script>
  Polymer({
    ...
    _computeExerciseTemplates: function(workout) {
      return Object.keys(workout.exercise_templates);
    }
  });
</script>

＆＃13;

<head>
  <base href="https://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="[[workouts]]" as="workout">
        <h2>{{workout.name}}</h2>
        <ul>
          <template is="dom-repeat" items="[[_computeExerciseTemplates(workout)]]">
            <li>{{item}}</li>
          </template>
        </ul>
      </template>
    </template>

    <script>
      Polymer({
        is: 'x-foo',

        properties: {
          workouts: {
            type: Array,
            value: function() {
              return [{
                //"-KBJiXAHZV2B8sj9-FNk" : {
                "exercise_templates": {
                  "-KEsVT-ukSHMNevLFCa1": true,
                  "-KEslP747OVTdIYrNmCv": true,
                  "-KEslUBaSsmTOiVgV_h_": true,
                  "-KFpJyXrZwY_aPiDGGvw": true
                },
                "name": "ICF A"
                  //}
              }]
            }
          }
        },
        _computeExerciseTemplates: function(workout) {
          return Object.keys(workout.exercise_templates);
        }
      });
    </script>
  </dom-module>

</body>

＆＃13;

^jsbin

聚合物dom-repeat与firebase儿童

1 个答案: