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是根据此请求加载的这种类型的数组小部件。在这里，您可以确定是否要向小部件的数据中添加某些内容。您可以在模板和前端js中访问此信息。

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

1 个答案: