Apostrophe CMS：如何根据用户选择推送JS资源？

Got it, let's tackle how to dynamically push JS assets based on a user's selection in your Apostrophe pieces-page's construct method. Here's a step-by-step solution tailored to your module:

1. Update Your Module with the construct Hook #

First, we'll use the beforeSend hook (fired right before the page is sent to the browser) to check the user's selected timerType and push the corresponding JS file. Here's the expanded version of your module code:

module.exports = {
  name: 'lionjar-countdown-page',
  label: 'Timer Page',
  extend: 'apostrophe-pieces-pages',
  addFields: [
    {
      name: 'bckImageTimer',
      label: 'Image de background',
      type: 'singleton',
      widgetType: 'apostrophe-images',
      options: { limit: 1, aspectRatio: [1, 1] }
    },
    {
      name: 'timerType',
      label: "Sélectionnez l'animation d'arrière-plan",
      type: 'select',
      choices: [
        { label: 'Animation 1', value: 'animation-1' },
        { label: 'Animation 2', value: 'animation-2' }
      ]
    }
  ],
  construct: function(self, options) {
    // Preserve the original beforeSend behavior if it exists
    const superBeforeSend = self.beforeSend;
    
    self.beforeSend = function(req, res, next) {
      // Access the current page's data
      const page = res.data.page;
      
      // Push JS assets based on the selected timerType
      if (page && page.timerType) {
        switch(page.timerType) {
          case 'animation-1':
            self.pushAsset('script', 'animation-1', { when: 'always' });
            break;
          case 'animation-2':
            self.pushAsset('script', 'animation-2', { when: 'always' });
            break;
          // Add more cases for additional timer types
          default:
            // Optional: Push a default JS file if no match is found
            self.pushAsset('script', 'default-timer', { when: 'always' });
        }
      }
      
      // Call the original beforeSend hook if it exists
      if (superBeforeSend) {
        return superBeforeSend(req, res, next);
      }
      next();
    };
  }
};

2. Organize Your JS Files #

Place your JS files in the module's public directory following this structure:

lib/modules/lionjar-countdown-page/public/js/
├── animation-1.js
├── animation-2.js
└── default-timer.js

Apostrophe will automatically resolve these paths when you use pushAsset.

3. Initialize Your Animations in JS #

Make sure your JS code waits for Apostrophe to fully load before running. Use the aposReady event:

// Example: public/js/animation-1.js
apos.on('aposReady', function() {
  // Add your animation logic here
  console.log('Animation 1 loaded and ready!');
  // e.g., Initialize a countdown timer with specific animation effects
});

Key Notes #

• The beforeSend hook is perfect for this use case because it has access to the current page's data (res.data.page) right before the response is sent to the browser.
• self.pushAsset is Apostrophe's built-in method to add static assets (scripts or styles) to the page. The { when: 'always' } option ensures the asset is included every time the condition is met.
• If your timerType uses a different field type (like radio buttons), the logic stays the same—just check the value of page.timerType as needed.

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