Ajout de Javascript spécifique à la page à chaque vue dans CakePHP



Answers

Comme dit Deceze, nous le faisons en utilisant la mise en page, bien que je trouve notre solution un peu plus élégante :)

Dans default.ctp:

if(isset($cssIncludes)){
    foreach($cssIncludes as $css){
        echo $html->css($css);
    }
}

if(isset($jsIncludes)){
    foreach($jsIncludes as $js){
        echo $javascript->link($js);
    }
}

Ensuite, dans nos actions de contrôleur, nous définissons ces tableaux:

$this->set('cssIncludes',array('special')); // this will link to /css/special.css
$this->set('jsIncludes',array('jquery'));   // this will link to /js/jquery.js

Pour les fichiers qui doivent être chargés dans chaque vue, nous ajoutons simplement le même type de lien "statiquement" en haut de la mise en page, comme:

echo $javascript->link('global');
echo $html->css('global');

Cela fonctionne vraiment bien pour nous. Bonne chance!

Question

Pour tenter de maintenir mes scripts maintenables, je vais les déplacer dans leur propre fichier, organisé par contrôleur et action:

// scripts which only apply to /views/posts/add.ctp
/app/webroot/js/page/posts/add.js

// scripts which only apply to /view/users/index.ctp
/app/webroot/js/page/users/index.js

Tout cela est cool, mais j'aimerais que ceux-ci soient automatiquement ajoutés par le contrôleur, car il connaît évidemment le nom du contrôleur et de l'action.

Je pense que le meilleur endroit pour cela est dans AppController::beforeRender() . (Oui?)

Le seul problème est que je ne sais pas comment l'ajouter réellement dans la variable $scripts_for_layout . Je pensais que l'obtention d'une référence à l'objet auxiliaire javascript fonctionnerait, mais je ne peux pas le trouver à partir du contrôleur!

class AppController extends Controller {
    var $helpers = array("javascript", "html", "form");

    function beforeRender() {
        // ???
    }
}



Il y a un article sur le blog de CakePHP sur la convention sur la configuration - quel est le problème? - qui utilise un assistant pour spécifier les fichiers Javascript:

<?php

class JsManagerHelper extends AppHelper {

    var $helpers = array('Javascript');

    //where's our jQuery path relevant to CakePHP's JS dir?
    var $_jqueryPath = 'jquery';

    //where do we keep our page/view relevant scripts?
    var $_pageScriptPath = 'page_specific';

    function myJs() {
    return $this->Javascript->link($this->_jqueryPath . '/' .
                                    $this->_pageScriptPath .'/' .
                                    $this->params['controller'] . '_' .
                                    $this->params['action'], false);
    }

}

?>

Et puis vous avez juste $jsManager->myJs(); à votre avis.




Je devais juste faire une inclusion spécifique à la page, mais j'ai trouvé une façon plus simple de le faire dans la documentation . Vous pouvez simplement le charger dans un bloc de script dans votre fichier default.ctp. Et dans la vue correspondante, utilisez simplement l'assistant HTML pour pousser un script:

Vous pouvez ajouter la balise de script à un bloc spécifique en utilisant l'option de bloc:

echo $this->Html->script('wysiwyg', array('block' => 'scriptBottom'));

Qui ajoute <script type="text/javascript" href="/js/wysiwyg.js"></script> à un bloc.

Dans votre mise en page, vous pouvez afficher toutes les balises de script ajoutées à 'scriptBottom':

echo $this->fetch('scriptBottom');



LI a travaillé un peu (très peu) sur l'extrait W1ckd et a facilité le partage des mêmes j pour différentes actions:

if ( is_dir(WWW_ROOT . 'js' . DS . $this->params['controller'] ) && ( $handle = opendir( WWW_ROOT . 'js' . DS . $this->params['controller'] ) ) )
{
    while ( false !== ( $entry = readdir( $handle ) ) )
    {
        if ( in_array( $this->params['action'], explode( '.', $entry ) ) ) {
            $entry = str_replace( ".js", "", $entry );
            echo $this->Html->script( $this->params['controller'].DS.$entry );
        }

    }
    closedir( $handle );
}

De cette façon, vous pouvez avoir quelque chose comme:

webroot / js / controller / view.edit.add.js

Et ce js sera inclus dans ces trois actions (voir, éditer, ajouter).






Related