动态加载窗口小部件

Question

我有两本“书”和“书架”。我在书架上分配了一本书作为田野。我想在书架的show.html文件中动态加载一个书本小工具，而无需任何用户交互，因此我的书架上有一本书是从书架上加载的。我正在使用Apostrophe-CMS的2.47.0版本。

预先感谢您的回答。

/books/index.js

module.exports = {
extend: "apostrophe-pieces",
name: "book",
label: "Book",
pluralLabel: "Books",

addFields: [
    {
        name: "title",
        label: "Title",
        type: "string",
    },
    {
        name: "pageCount",
        label: "Page Count",
        type: "integer",
    }
  ]
}

/shelves/index.js

module.exports = {
extend: "apostrophe-pieces",
name: "shelf",
label: "Shelf",
pluralLabel: "Shelves",

addFields: [
    {
        name: "size",
        label: "Size",
        type: "string",
    },
    {
        name: '_book',
        withType: 'book',
        label: 'Book',
        type: 'joinByOne',
    }
  ]
}

/books-widgets/views/widget.html

{% for piece in data.widget._pieces %}

    <div>The books name is: {{piece.title}}</div>
    <div>The book has {{piece.pageCount}} pages</div>

{% endfor %}

/shelves-pages/views/show.html

{% extends "layout.html" %}
{% block main %}

   <div>The shelf is {{data.piece.size}} tall</div>
   <div>The shelf includes this book: </div>

   <!--This is the place where I want to display the book which is saved 
   in my shelf-->
   <div>{{apos.singleton(data.piece, '_book', 'book', {})}}</div>
   <!-- This is the method how it works with e.g. images -->

{% endblock %}