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

时间:2018-04-27 18:44:47

标签: javascript polymer-2.x dom-repeat

使用dom-repeat循环和模板的常规使用,该字段 引用是针对源对象进行硬编码的。在下面的例子中,我们是 从JSON对象中提取名称和描述字段。工作正常。

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

在我的应用程序中,我想通过使用a来以编程方式提取值 循环通过提供的字段列表的嵌套模板。不过我不是 能够使它工作,结果出现在文字文本而不是按照我的意愿执行:

 <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会占用对象&amp;字段说明符并返回一个字符串。

只是不确定如何实现它。有什么想法吗?

附录显示缺失部分:

<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 :(得分:0)

好的,解决方案与我想要的相去甚远。这是一个应用正确语法的问题:

<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安全字符串。没有机会发出浏览器识别的标签。 :(

如果有人知道如何克服这个障碍,请告诉我。