Red > Green > Refactor > Red

cycle is based on desire

ページごとに特定のjsを読込む CakePHP

やりたいこと

標題の通り

方法

jQuery を用意する

  1. {CAKE_ROOT}/webroot/js に jquery-{stable_ver}.min.js を配置する

View で jQuery を読み込む

  1. {CAKE_ROOT}/app/View/Layouts/default.ctp で echo $this->fetch('script') している行を探す
    1. の行より上に次のコードを記述
echo $this->Html->script('jquery-1.11.1.min.js', array('inline' => true));
 27   <?php
 28     echo $this->Html->meta('icon');
 29     echo $this->Html->css('cake.generic');
 30     echo $this->Html->script('jquery-1.11.1.min.js', array('inline' => true));
 31     
 32     echo $this->fetch('meta');
 33     echo $this->fetch('css');
 34     echo $this->fetch('script');
 35   ?>

js を作る

  1. {CAKE_ROOT}/webroot/js/myjs.js を配置する
$(function() {
  alert('hello world');
});

各々の View で myjs.js を読込む

  1. 各々の View で js 読込みメソッドを呼ぶ

{CAKE_ROOT}/app/Views/Posts/index.ctp

1 <?php echo $this->Html->script('myjs', array('inline' => false)); ?>

=> ブラウザで /posts/index にリクエストしたときだけ myjs.js が読込まれ、ダイアログ[hello world] が表示される

$this->Html->script の第 2 引数は何か

スクリプトを記述した場所で出力するか、$this->fetch('script') で出力するか場合分けする

1. echo $this->Html->script('myjs')  /* 記述した場所で myjs スクリプトを出力する */
2. echo $this->Html->script('myjs', array('inline' => false));  /* $this->fetch('script') で myjs スクリプトを出力する */

jQuery の読込み時には inline の指定順序に注意


参考元:

Js/Cssファイルの読み込みや出力する方法