Help us understand the problem. What is going on with this article?

Controllerから簡単にJSに変数を渡したい in CakePHP3

More than 1 year has passed since last update.

CakePHP3 Advent Calendar 2016の11日目 兼
Fusic Advent Calendar 2016の11日目の記事です。

こんにちは、クリスマス三連休の孤独に耐えるために一気見するアニメの選定に最近忙しいtutidaです。
福岡のFusicにてLAMPでCakePHPでウェブアプリ開発もしくは、AWSをいじいじしております。
会社のAdvent Calendarがだいぶカオスなことになってきてますが、気にしない

というところで、CakePHP3で業務を行う際に発生した小さな悩みを解決するためのPluginを作成したので紹介します。

Controller's variables to Js

CakePHP3のControllerで作った変数をJS側で使いたい。

  • layoutのscriptタグに書き込む
  • data属性にぶち込む

数が多くなってくるとしんどいし、ctpも読みにくくなってくる。つらみがある。

Railsに便利そうなの発見

Gon - get your Rails variables in your js

Gon.Readme.mdより


  1. Write variables by

    gon.variable_name = variable_value
    
    # or new syntax
    gon.push({
      :user_id => 1,
      :user_role => "admin"
    })
    
    gon.push(any_object) # any_object with respond_to? :each_pair
    
  2. In your js you get this by

    gon.variable_name
    

なるほど、便利そう。

Plugin つくってみた(簡易版

Pack - You can easy to pass CakePHP3 variables to JS in View.

内部的にはStaticなClassに対して、ComponentとHelperから値を入れたり取得したりするだけ。
じゃあ、直接 StaticなClass叩けばいいじゃんとかいは言わないで
通常のControllerのsetと同じ感覚で変数をjsに渡せます。

使い方

読み込んで

<?php
    class AppController extends Controller
    {

        public function initialize()
        {
            $this->loadComponent('Pack.Pack');
        }
        ...
    }

layoutにこれかいて

    <?= $this->Pack->render();?>

コントローラーで値をセット

    $url    = 'https://qiita.com';
    $entity = $this->Hoge->get($id);
    $array  = ['hoge', 'fuga'];

    $this->Pack->set('url', $url);
    $this->Pack->set('entity', $entity);
    $this->Pack->set('array', $array);

    ## OR ##
    $this->Pack->set(compact('url', 'entity', 'array'));

JS側で参照可能に

    Pack.url;    // > https://qiita.com
    Pack.entity; // > Object {id: ..., name: ..., ....}
    Pack.array;  // > Array[2] {0: 'hoge', 1: 'fuga'}

他の機能はREADMEにちょこちょこ書いています。

順次アップデート

予定...(汗

その他

  • Altair - Auto converting special characters of variables to HTML entities
    • HTMLエスケープ用のPlugin、もし困っているのであればご参照ください
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away