Apostrophe：编辑Widget后pageBeforeSend扩展数据丢失问题求助

这个问题我之前也碰到过！核心原因是：pageBeforeSend 只有在完整页面请求时才会触发，但当你编辑Widget并保存后，Apostrophe是通过局部Ajax刷新对应的区域/Widget，不会重新走整个页面的渲染流程，所以你的外部数据没被附加进去，只有全页刷新才会重新触发pageBeforeSend恢复数据。

最靠谱的解决办法是把外部数据的附加逻辑移到Widget自身的load方法里，因为每个Widget实例（不管是全页加载还是局部刷新）都会触发这个方法，这样数据就能始终和Widget绑定在一起。

具体步骤 #

1. 打开你的Widget模块文件（比如lib/modules/[your-widget-name]/index.js），重写load方法：

module.exports = {
  extend: 'apostrophe-widgets',
  label: '自定义Widget',
  // 重写Widget的load方法
  load: function(widget, callback) {
    // 先调用父类的默认load逻辑
    return this.__super__.load.call(this, widget, (err) => {
      if (err) {
        return callback(err);
      }
      // 这里替换成你获取外部数据的逻辑，比如调用API、查询外部数据库等
      // 假设你的Mongo字段是`mongoField`，用它来关联外部数据
      fetchExternalData(widget.mongoField, (err, externalData) => {
        if (err) {
          return callback(err);
        }
        // 把外部数据挂载到widget对象上，模板里就能直接访问了
        widget.externalData = externalData;
        callback(null);
      });
    });
  }
};

2. 在你的Widget Nunjucks模板（比如lib/modules/[your-widget-name]/views/widget.html）里，直接通过widget.externalData访问数据：

<div class="custom-widget">
  <!-- 原Mongo字段数据 -->
  <p>{{ widget.mongoField }}</p>
  <!-- 附加的外部数据 -->
  <p>{{ widget.externalData.someProperty }}</p>
</div>

为什么这个方法有效？ #

当你编辑Widget并保存后，Apostrophe会异步请求服务端重新渲染这个Widget，此时会触发Widget的load方法，你的外部数据会被重新获取并附加到Widget上下文里，渲染后的HTML会包含最新的外部数据，不需要全页刷新就能正常显示。

如果你的外部数据是和整个页面绑定，而非单个Widget，那可以考虑前端监听apostrophe-ajax:afterRefresh事件，在局部刷新后主动请求数据并更新页面，但这种方案适合不需要服务端渲染的场景，不如Widget级别的load方法优雅。

内容的提问来源于stack exchange，提问作者Laurent Godard