Программный доступ к значениям объекта во вложенных шаблонах Polymer 2 - PullRequest
Новая
       34

Программный доступ к значениям объекта во вложенных шаблонах Polymer 2

0 голосов
/ 27 апреля 2018

При обычном использовании dom-repeat цикла и шаблона поле ссылка жестко закодирована в отношении исходного объекта. В приведенном ниже примере мы извлечение полей имени и описания из объекта JSON. Работает нормально. 

 <template is="dom-repeat" items="[[subjects]]">
      {{item.name}},  {item.description}}
 </template>

В моем приложении я хотел бы получить значения программно, используя Вложенный шаблон, который проходит по предоставленному списку полей. Однако я не в состоянии заставить это работать, результаты получаются как буквальный текст, а не как я хотел бы: 

 <template is="dom-repeat" items="[[subjects]]">
      <template is="dom-repeat" items="[[fields]]" as="field">
            {{item.{{field}}}},
      </template>
 </template>

Это варианты, которые я пробовал, и результаты с использованием 'name' и 'description' как поля: 

   {{item.{{field}}}},      ->  "{{item.name}}  {{item.description}}"
   {{item[ {{field}} ]}},   ->  "{{item[ name ]}}   {{item[ description ]}}"

В идеале мне бы хотелось, чтобы это работало так: 

    someFunction( {{item}}, {{field}} )

Где someFunction принимает спецификатор объекта и поля и возвращает строку.

Просто не уверен, как это сделать. Есть идеи?

Приложение, в котором указаны недостающие части: 

<iron-ajax>
      auto         
      url="https://api.github.com/users/burczu/repos"
      params='{"type":"all"}'
      handle-as="json"
      on-response="handleResponse">
</iron-ajax>

и 

<script>

    class MyElement extends Polymer.Element {

      static get is() { return 'my-element'; }

      static get properties() {
        return {
            subjects: { type: Array },
            fields: { type: Object }
            };
        }

        ready() {
           super.ready();
           this.fields = JSON.parse('{"show": ["name", "description"] }').show;
        }

        handleResponse(data) {
            this.subjects = data.detail.response;
        }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>

1 Ответ

0 голосов
/ 02 мая 2018

Хорошо, решение не далеко от того, что я хотел. Это был вопрос применения правильного синтаксиса: 

<template is="dom-repeat" items="[[subjects]]">
      <template is="dom-repeat" items="[[fields]]" as="field">
            [[ _formatText(item, field) ]],
      </template>
 </template>

<script>
     class MyElement extends Polymer.Element {
        . . .
        _formatText(obj, field) {
            return obj[field];
            }
        . . .
       }
</script>

Хотя это работает так, как я хотел, весь текст, возвращаемый функцией _formatText, будет отображаться как HTML-безопасная строка за пределами квадратных скобок. Нет шансов испустить теги, распознаваемые браузером. (

Если кто-нибудь знает, как преодолеть это препятствие, пожалуйста, дайте мне знать.

...