向小部件添加自定义参数

Question

假设我们创建了一个简单的小部件，它可能有一个字符串或一个富文本字段。当我将小部件插入 html 时，我想指定哪个字段是 visible/active。换句话说，我想向小部件添加一些自定义选项，这将改变它的行为。小部件如下所示：

{{
    apos.singleton(data.page, 'footerTitle', 'footerTitle', {
        controls: {
            movable: false,
            position: 'top-right'
        }
    })
}}

我想做这样的事情：

{{
    apos.singleton(data.page, 'footerTitle', 'footerTitle', {
        controls: {
            movable: false,
            position: 'top-right'
        },
        settings: {
            type: 'string',
            anotherParameter: 1,
            thirdParameter: false
        }
    })
}}

稍后（在小部件的 index.js 内）将相应地处理这些参数：

...
beforeConstruct: function( self, options )
{
    if (type === 'string')
    {
        // Do some additional setup, magic, whatever...
    }
    switch (anotherParamter)
    {
        // Add some insane code here :)
    }
},
construct: function( self, options )
    {
        const superLoad = self.load;
        self.load = ( req, widgets, callback ) => superLoad( req, widgets, ( err ) =>
        {
            if( err )
            {
                return callback( err );
            }

            for( const widget of widgets )
            {
                // Some additional work here based on the initial settings.
            }

            return callback( null );
        } );
    }
...

是否有可能向小部件添加自定义参数、选项（在版本 2.98.1 或更高版本中的 3.0.0）？

Answer 1

这在撇号 2.x 中显示的方式中是不可能的，因为小部件选项是从模板传递的，并且模板只能执行同步工作。 widget模块的load方法此时已经运行了。所以现在影响取东西的方式已经太迟了。

不过，有一种方法可以达到你想要的效果。我们在这种情况下所做的是创建小部件的子类，并在每个地方使用适当的子类。或者，我们有时会在小部件的架构中使用 select 元素。

在这两种情况下，您都可以修改 load 的行为以适应这种情况。

对于子类化方法，可以编写扩展第一个模块的第二个模块：

// in lib/modules/subclass-widgets
module.exports = {
  name: 'subclass',
  extend: 'original-widgets',
  construct: function(self, options) {
    var superLoad = self.load;
    self.load = function(req, widgets, callback) {
      // ... we can call superLoad if we want or completely replace it
    };
  }
}

然后在模板中提供 original、subclass 或两者的选项。

对于 select 字段替代，您可以只使用一个小部件类型：

// in lib/modules/cool-widgets/index.js
module.exports = {
  name: 'cool',
  addFields: [
    {
      name: 'subtype',
      label: 'Subtype',
      type: 'select',
      choices: [
        {
          label: 'One',
          value: 'one'
        },
        {
          label: 'Two',
          value: 'two'
        },
      ]
    }
  ]
  construct: function(self, options) {
    self.load = function(req, widgets, callback) {
      for (const widget of widgets) {
        if (widget.subtype === 'two') { ... }
      }
    };
  }

最佳选择取决于您是否通常每次都为用户提供选择并且代码不会有太大差异（使用 select 元素）或者您是否想限制他们的内容可以在每个模板中做（改用子类化，每个模板只放符合用例的子类）。

至于3.0版本，将有办法实现你最初在3.0中提出的要求。一方面，output 方法是 3.x 中的 async 方法。这意味着您可以覆盖它并使用选项进行异步工作。另一方面，3.x 支持模板中的异步组件：

https://github.com/apostrophecms/apostrophe/issues/1668

（已关闭，因为它是在 3.0 分支中实现的）

但是，3.0 的发布还有一段时间，现在还不是开始项目的时候。版本 2.x 到 2023 年都有企业支持，作为维护者，我们今天在 2.x 开始新的企业项目，所以我不建议等待。

今年夏天 3.0 的开发速度有所放缓，因为我们将 Apostrophe Technologies 扩展到自己的公司，并承担了基于 2.x 的额外企业支持工作，但从长远来看运行这就是使我们能够在未来几个月内更有效地配备人员和追求 3.0。

向小部件添加自定义参数

Adding custom parameters to a widget

apostrophe-cms