Tags

, , ,

Yii adalah framework PHP. Idealnya kode javascript yang ada harus cukup simple atau digenerate otomatis oleh framework. Tetapi kadang mungkin secara gak sengaja, kode javascript yang harus ditulis bisa sangat panjang :D. Akan sangat jelek kalau kode javascriptnya ditulis jadi satu dengan kode php. Apalagi jika ditulis sebagai string php, tidak berwarna, tidak ada autocomplete :D.

$js = <<<JS
  $('#klikme').click(function(){
    // bla bla bla
    alert($(this).data('text'));
  });
  // bayangkan jika kodenya sangat panjang dan gak ada autocomplete.
  // 
JS;
$cs = Yii::app()->clientScript;
$cs->registerScript('skrip',$js);

Jika kodenya sangat panjang, ada baiknya memisahkannya dalam file tersendiri. Caranya, buat file dengan nama _script.php

<?php if(false): ?>
<script>
<?php endif; ?>

myObj = (function($){
    var varLocal1, varLocal2, etc, dll;

    function funcLocal(){
        // do something...
    }

    var pub = {
        propertySatu: 1,
        propertyDua: 'dua',
        methodSatu: function(){
            funcLocal();
        },
        klikMe: function(event){
            $(event.target).hide();
            // bla bla bla
        }
    };

    return pub;
})(window.jQuery);

Baris 1 sampai 3 hanya untuk autocomplete di IDE aja :D. Dibuang juga gak papa.
Dari view utama, file tersebut dipanggil.
Di Yii 1 caranya adalah sebagai berikut.

$skrip = $this->renderPartial('_script',array(),true);
$cs = Yii::app()->clientScript;
$cs->registerScript('skrip_dari_script',$skrip,CClientScript::POS_END);

$js = <<<JS
    $('#klikme').click(myObj.klikMe);
JS;
$cs->registerScript('skrip',$js);

Sedangkan kalau di Yii2

$skrip = $this->render('_script');
$this->registerJs($skrip,yiiwebView::POS_END);

$js = <<<JS
    $('#klikme').click(myObj.klikMe);
JS;
$this->registerJs($js);

Lalu dimana enkapsulasinya? Perhatikan kode di atas. myObj = pub. Properti atau methode yang bisa diakses hanyalah yang berada dalam object pub. function funcLocal() atau variable varLocal1 tidak bisa di akses dari luar. Ini sama seperti property atau methode private di OOP.

Tambahan untuk Yii 2

Di Yii 2, anda bisa mengganti kode myObj = (function($){ dengan yii.myObj = (function($){.
Lalu anda bisa menambahkan methode init di pub. Methode ini akan dieksekusi saat document ready

yii.myObj = (function($){
    //...
    var pub = {
        // ...
        init: function(){
            // akan dieksekusi saat document ready
        }
    };

    return pub;
})(window.jQuery);

Pastikan anda telah meregister yii\web\YiiAsset.

yii\web\YiiAsset::register($this);
$js = "$('#klikme').click(yii.myObj.klikMe);";

Selamat Mencoba 😀

Advertisements