Polymer 2嵌套模板中以编程方式访问对象值的问题

我完全懂你的需求——不想在dom-repeat里硬编码item.name、item.description这种字段，而是通过一个可配置的字段列表来动态提取对象值，对吧？这在Polymer里完全可以实现，给你分享两种实用的方案：

方案一：嵌套dom-repeat + 动态取值函数 #

这种方式适合需要对每个字段值做单独样式或布局处理的场景，外层遍历数据列表，内层遍历字段列表，通过一个工具函数获取对应字段的值：

<dom-module id="subject-list">
  <template>
    <!-- 外层遍历所有subject对象 -->
    <template is="dom-repeat" items="[[subjects]]" as="subject">
      <div class="subject-card">
        <!-- 内层遍历需要展示的字段列表 -->
        <template is="dom-repeat" items="[[displayFields]]" as="field">
          <div class="field-item">
            <!-- 用getFieldValue函数动态获取对象属性 -->
            <span class="field-label">[[field]]:</span>
            <span class="field-value">[[getFieldValue(subject, field)]]</span>
          </div>
        </template>
      </div>
    </template>
  </template>

  <script>
    Polymer({
      is: 'subject-list',
      properties: {
        // 数据源
        subjects: {
          type: Array,
          value: () => [
            {name: 'Mathematics', description: 'Study of numbers & patterns', credits: 3},
            {name: 'Biology', description: 'Study of living organisms', credits: 4}
          ]
        },
        // 可配置的字段列表，想展示什么字段就加在这里
        displayFields: {
          type: Array,
          value: () => ['name', 'description', 'credits']
        }
      },
      // 动态获取对象指定字段的值，同时处理空值避免报错
      getFieldValue: function(obj, fieldName) {
        return obj && obj.hasOwnProperty(fieldName) ? obj[fieldName] : 'N/A';
      }
    });
  </script>
</dom-module>

这个方案的好处是灵活：你可以随时修改displayFields数组来增减展示的字段，不用改动模板结构；而且每个字段的渲染都可以单独控制样式。

方案二：计算属性拼接字段值 #

如果只需要把多个字段值按格式拼接成字符串展示，用计算属性会更简洁，不用嵌套dom-repeat：

<dom-module id="subject-summary">
  <template>
    <template is="dom-repeat" items="[[subjects]]" as="subject">
      <p>[[formatSubjectString(subject, displayFields)]]</p>
    </template>
  </template>

  <script>
    Polymer({
      is: 'subject-summary',
      properties: {
        subjects: {
          type: Array,
          value: () => [
            {name: 'Physics', description: 'Study of matter & energy'},
            {name: 'History', description: 'Study of past events'}
          ]
        },
        displayFields: {
          type: Array,
          value: () => ['name', 'description']
        }
      },
      // 把指定字段值拼接成逗号分隔的字符串
      formatSubjectString: function(subject, fields) {
        if (!subject || !Array.isArray(fields)) return '';
        return fields
          .map(field => subject[field])
          .filter(val => val !== undefined && val !== null) // 过滤空值
          .join(', ');
      }
    });
  </script>
</dom-module>

这个方案的优势是模板更简洁，适合只需要文本拼接的场景，比如你原来示例里的{{item.name}}, {{item.description}}这种需求，用这个方法完全可以替代硬编码。

注意事项 #

• 一定要处理空值或不存在的字段：比如getFieldValue里的判断，避免因为对象为空或字段不存在导致页面报错；
• 如果使用Polymer 3.x，语法会变成ES模块的写法，但核心的动态取值逻辑是一致的；
• 如果你需要更复杂的字段映射（比如把字段名转成友好的显示名称），可以把displayFields改成对象数组，比如[{key: 'name', label: '课程名称'}, ...]，然后在模板里用field.label和getFieldValue(subject, field.key)即可。

内容的提问来源于stack exchange，提问作者Brian