如何在 Apostrophe cms 中访问小部件模板内的小部件属性/参数

Question

我正在使用 Apostrophe CMS，并尝试创建一个小部件，该小部件根据其设置从第三方 API 获取一些值。有什么方法可以检索小部件 index.js 中小部件的值吗？ 基本上，当管理员创建一个页面时，他会添加一个设置了一些值的小部件。并且小部件的行为应该根据这些设置而改变。这有可能吗？如果有，那又如何？

const request = require('request-promise');

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Listing widget',
    addFields: [
        {
            name: 'page',
            type: 'integer',
            label: 'Page',
            required: true
        },
        {
            name: 'count',
            type: 'integer',
            label: 'Count',
            required: true
        }
    ],
    construct: function(self, options) {
        self.on('apostrophe-pages:beforeSend', 'preset', async function(req) {
            var page = ...;
            var count = ...;
            const dataToList = await request({
                uri: "someURL?count=" + count + "&page=" + page,
                json: true
              });
            req.data.dataToList = dataToList;
        });
    }
};

在我的代码中，您可以看到一个非常基本的小部件。我唯一需要做的就是以某种方式获取 page 和 count 变量的值。

更新： 根据 Stuart Romanek 的建议，更正后的最终代码如下所示：

const request = require( 'request-promise' );

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Listing widget',
    addFields: [
        {
            name: 'page',
            type: 'integer',
            label: 'Page',
            required: true
        },
        {
            name: 'count',
            type: 'integer',
            label: 'Count',
            required: true
        }
    ],
    construct: function( self, options )
    {
        const superLoad = self.load;
        self.load = ( req, widgets, callback ) => superLoad( req, widgets, async ( err ) =>
        {
            if( err )
            {
                return callback( err );
            }

            for( const widget of widgets )
            {
                var page = widget.page;
                var count = widget.count;

                const dataToList = await request( {
                    uri: "http:/APIRoute?count=" + count + "&page=" + page,
                    json: true
                } );

                widget.dataToList = dataToList;
            }
            return callback( null );
        } );
    }
};

并且可以从 HTML 访问它：data.widget.dataToList。

Answer 1

如果您想在一个小部件呈现在页面上之前对其执行某些操作，您可以在它的 index.js 中挂钩到小部件的 load 方法

module.exports = {
  name: 'my-widget',
  label: 'My Widget',
  construct: (self, options) => {
    const superLoad = self.load;
    self.load = (req, widgets, callback) => superLoad(req, widgets, (err) => {
      if (err) {
        return callback(err);
      }

      // Hit some API, do something wacky

      for (const widget of widgets) {

        // do something to each widget

        widget.coolThing = true;
      }
      return callback(null);
    });
  }
};

https://docs.apostrophecms.org/apostrophe/modules/apostrophe-widgets#load-req-widgets-callback

在load 中，widgets 是在此请求上加载的这种类型的数组小部件。在这里，您可以确定是否要向小部件的数据添加内容。您可以在模板和前端 js 中访问此信息。