apostrophe cms — как добавить / отобразить массив в widget.html

#arrays #apostrophe #apostrophe-cms

#массивы #апостроф #apostrophe-cms

Вопрос:

я новичок в apostophy cms, и я застрял на массиве в widget.html Он находится в div с потоковой передачей __нижнего колонтитула подкаста класса c.

Это мой виджет (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

Ответ №1:

[Редактировать для проясненного вопроса]

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

В views/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 %}
  

Комментарии:

1. привет! спасибо за ваш ответ. Но я думаю, мы говорим о двух разных вещах. Я создал виджет, в котором есть несколько полей: строки и отдельные элементы. Одним из полей должен быть массив, в котором отображаются значки со ссылками. Этот массив действительно работает в серверной части apostrophe cms, но он не предоставляет данные в представлении сайта в браузере.

2. Большое вам спасибо! Это оно! 🙂

3. Отлично! Если бы вы могли пометить этот вопрос как ответ, это было бы здорово