如何在 Apostrophe cms 的小部件模板内访问小部件 properties/parameters

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

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

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 是根据此请求加载的此类数组小部件。在这里您可以确定是否要向小部件的数据添加一些内容。您可以在模板和 front-end js.

中访问此信息

如何在 Apostrophe cms 的小部件模板内访问小部件 properties/parameters

How to access widget properties/parameters inside a widget template in Apostrophe cms

apostrophe-cms