Usage examples

RWOverdijk edited this page Aug 6, 2012 · 27 revisions

Configuration

RequireJS takes some configuration options, and SxRequireJs allows you to set them.

Paths

Paths are part of the requireJs configuration. However, SxRequireJs likes to keep track of the paths that have been set. This is why setting paths is done in a different manner which you can see here.

baseUrl
<?php $this->requirejs()->setBaseUrl('newbase'); ?>
Custom configuration

Being able to add configuration to requireJS should be possible. And guess what, it is! This is how you'd add configuration data:

<?php
$this->requireJs()->addConfiguration(array(
    'waitSeconds' => 15,
    'shim' => array(
        'foo' => array(
            'deps' => array('bar'),
        ),
    ),
));

Adding module paths and applications on bootstrap

This is especially useful when you don't want to expose the logic of the modules in your views, and just wish to add module paths and applications so you can get going. This helps you separate your javascript modular logic from your views and allows you to not worry about defining applications in "some" view file.

<?php
namespace MyModule;

class Module
{
    public function onBootstrap($e)
    {
        $viewManager    = $e->getApplication()->getServiceManager()->get('ViewManager');
        $helperManager  = $viewManager->getHelperManager();
        $requireJS      = $helperManager->get('requirejs');

        // Adding path as ../ because baseUrl is js/
        $requireJS->addPath('somemodule', '../Somemodule/js');

        // Add this application with the highest priority (must be loaded first)
        $requireJS->addApplication('somemodule/app', 1000);
    }

    public function getConfig()
    {
        return include __DIR__ . '/config/module.config.php';
    }

    public function getAutoloaderConfig()
    {
        return array(
            'Zend\Loader\StandardAutoloader' => array(
                'namespaces' => array(
                    __NAMESPACE__ => __DIR__ . '/src/' . __NAMESPACE__,
                ),
            ),
        );
    }
}

Adding module paths and applications in view files

This is the same as adding them in the bootstrap.

<?php $this->requirejs()->addPath('somemodule', '../Somemodule/js'); ?>

Getting the output

Once you have your Modules and Applications in place, it's time for you to actually put the execution code somewhere. I recommend outputting this data in the head of the layout. Not that it really matters where you put it, it's just nicer. SxRequireJs offers methods that will help you with this. All of them are part of the viewhelper. I've listed the possibilities for getting the output below.

__toString()
<?php echo $this->requirejs(); ?>
render()
<?php echo $this->requirejs()->render(); ?>

Note: Using these methods, everything is already wrapped in a script tag, so you don't have to put them around these calls again

getRequireJs(), getConfig(), getMain()
    <?php echo $this->requirejs()->getRequireJs(); ?>
    <?php echo $this->requirejs()->getMain(); ?>
    <?php echo $this->requirejs()->getConfig(); ?>

*Note: These methods, except for getRequireJs(), do not include script tags! *

Getting the output in stead of outputting it

If you want to fetch the output because you want to do something else with it (like write it to disk, or email it to your friends and family!) you can get it by simply calling render()

<?php $rendered = $this->requirejs()->render(); ?>

Flushing or "resetting" SxRequireJs

In some special cases you might want to reset SxRequireJs. This can be done by simply calling clean()

<?php $cleanInstance = $this->requirejs()->clear(); ?>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.