апостроф cms - как добавить / отобразить массив в widget.html

Question

Я новичок в апостофии, и застрял в массиве в widget.html. Он находится в div с классом c-podcast__footer-streaming.

Это мой виджет (index.js):

module.exports = {
extend: 'apostrophe-widgets',
label: 'Musicstream',
addFields: [
    {
        name: 'preheadline',
        type: 'string',
        label: 'Preheadline',
        required: true
    },
    {
        name: 'title',
        type: 'string',
        label: 'Title',
        required: true
    },
    {
        name: 'cover',
        type: 'singleton',
        label: 'Cover',
        widgetType: 'apostrophe-images',
        required: true
    },
    {
        name: 'button',
        type: 'string',
        label: 'Button',
        def: 'Abonnieren'
    },
    {
        name: 'buttonlink',
        type: 'string',
        label: 'Button Link',
        def: 'https://www.handelsblatt.com'
    },
    {
        name: 'more',
        type: 'string',
        label: 'More',
        def: 'https://www.handelsblatt.com/audio/'
    },
    {
        name: 'streamingsource',
        label: 'Streaming Dienst',
        type: 'array',
        schema: [
            {
                name: 'name',
                type: 'string',
                label: 'Name'
            },
            {
                name: 'icon',
                type: 'singleton',
                label: 'Icon',
                widgetType: 'apostrophe-images',
                required: true
            },
            {
                name: 'streamlink',
                type: 'string',
                label: 'Stream Link',
                required: true
            }
        ]
    }
]

};

и вот как я пытался включить его в мой шаблон wiget views / widget.html:

<div class="c-podcast">
<div class="c-podcast__header clearfix">
    <button class="c-podcast__header-play"></button>
    <div class="c-podcast__header-text">
        <span>{{ data.widget.preheadline }}</span>
        <h2>{{ data.widget.title }}</h2>
    </div>
    {{ apos.singleton (data.widget, 'cover', 'apostrophe-images') }}
</div>
<div class="c-podcast__player">
    <div class="c-podcast__player-scrollbar"></div>
    <span class="c-podcast__player-position"></span>
    <span class="c-podcast__player-time">-04:38</span>
</div>
<div class="c-podcast__footer clearfix">
    <button class="c-podcast__footer-cta" type="button">{{ data.widget.button }}</button>
    <div class="c-podcast__footer-streaming">
    {{ apos.area (data.widget, 'apostrophe-schemas', { 

        streamingsource: { 

            name: {},
            icon: {},
            streamlink: {}
         }
         })
     }}
    </div>
    <a class="c-podcast__footer-more" href="{{ data.widget.more }}">Alle Episoden ›</a> 
</div>

Но единственное, что я получаю, это пустой div: <div class="apos-area" data-apos-area="" data-doc-id=""></div>

Может ли кто-нибудь помочь мне, пожалуйста? :) большое спасибо, magvector

Answer 1

[Изменить для уточненного вопроса]

Вместо того, чтобы пытаться отобразить данные массива через функцию singleton, просто переберите массив и выведите то, что вы хотите, в шаблон.

Inviews/widget.html

{% for icon in data.widget.streamingsource %}
  The icon name: {{ icon.name }}
  The image: {{ apos.singleton(icon, 'icon', 'apostrophe-images') }}
  streamlink: {{ icon.streamlink }}
{% endfor %}