4.7 KiB
Trabajar con Scripts del Cliente
Note: Esta sección se encuentra en desarrollo.
Registrar scripts
Con el objeto yii\web\View puedes registrar scripts. Hay dos métodos dedicados a esto: yii\web\View::registerJs() para scripts en línea yii\web\View::registerJsFile() para scripts externos. Los scripts en línea son útiles para configuración y código generado dinámicamente. El método para agregarlos puede ser utilizado así:
$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');
El primer argumento es el código JS real que queremos insertar en la página. El segundo argumento determina en qué parte de la página debería ser insertado el script. Los valores posibles son:
- yii\web\View::POS_HEAD para la sección head.
- yii\web\View::POS_BEGIN justo después de la etiqueta
<body>. - yii\web\View::POS_END justo antes de cerrar la etiqueta
</body>. - yii\web\View::POS_READY para ejecutar código en el evento
readydel documento. Esto registrará yii\web\JqueryAsset automáticamente. - yii\web\View::POS_LOAD para ejecutar código en el evento
loaddel documento. Esto registrará yii\web\JqueryAsset automáticamente.
El último argumento es un ID único del script, utilizado para identificar el bloque de código y reemplazar otro con el mismo ID en vez de agregar uno nuevo. En caso de no proveerlo, el código JS en sí será utilizado como ID.
Un script externo puede ser agregado de esta manera:
$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
Los argumentos para yii\web\View::registerJsFile() son similares a los de
yii\web\View::registerCssFile(). En el ejemplo anterior,
registramos el archivo main.js con dependencia de JqueryAsset. Esto quiere decir que el archivo main.js
será agregado DESPUÉS de jquery.js. Si esta especificación de dependencia, el orden relativo entre
main.js y jquery.js sería indefinido.
Como para yii\web\View::registerCssFile(), es altamente recomendable que utilices asset bundles para registrar archivos JS externos más que utilizar yii\web\View::registerJsFile().
Registrar asset bundles
Como mencionamos anteriormente, es preferible utilizar asset bundles en vez de usar CSS y JavaScript directamente. Puedes obtener detalles de cómo definir asset bundles en la sección gestor de assets de esta guía. Utilizar asset bundles ya definidos es muy sencillo:
\frontend\assets\AppAsset::register($this);
Registrar CSS
Puedes registrar CSS utilizando yii\web\View::registerCss() o yii\web\View::registerCssFile(). El primero registra un bloque de código CSS mientras que el segundo registra un archivo CSS externo. Por ejemplo,
$this->registerCss("body { background: #f00; }");
El código anterior dará como resultado que se agregue lo siguiente a la sección head de la página:
<style>
body { background: #f00; }
</style>
Si quieres especificar propiedades adicionales a la etiqueta style, pasa un array de claves-valores como tercer argumento. Si necesitas asegurarte que haya sólo una etiqueta style utiliza el cuarto argumento como fue mencionado en las descripciones de meta etiquetas.
$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
'depends' => [BootstrapAsset::className()],
'media' => 'print',
], 'css-print-theme');
El código de arriba agregará un link al archivo CSS en la sección head de la página.
- El primer argumento especifica el archivo CSS a ser registrado.
- El segundo argumento especifica los atributos HTML de la etiqueta
<link>resultante. La opcióndependses especialmente tratada. Esta especifica de qué asset bundles depende este archivo CSS. En este caso, depende del asset bundle yii\bootstrap\BootstrapAsset. Esto significa que el archivo CSS será agregado después de los archivos CSS de yii\bootstrap\BootstrapAsset. - El último argumento especifica un ID que identifica al archivo CSS. Si no es provisto, se utilizará la URL del archivo.
Es altamente recomendable que ustilices asset bundles para registrar archivos CSS en vez de utilizar yii\web\View::registerCssFile(). Utilizar asset bundles te permite combinar y comprimir varios archivos CSS, deseable en sitios web de tráfico alto.