Zend Framework: seek to MVC Javascript, CSS
So that in this case it is possible to do. His first thought was to make an inline scripts and styles in external files and connect them via view helpers headLink and headStyle. If the styles are all generally clear — a very specific style for a specific type to make a css file and attach it as necessary, then js remains data-dependent.
As the first solution to write a plugin for frontController to connect as required for the needed files:
class My_Controller_Plugin_Webinit extends Zend_Controller_Plugin_Abstract
{
public function preDispatch()
{
the
- $controllerName = $this->_request->getControllerName();
the - $actionName = $this->_request->getActionName();
the
- $view = Zend_Layout::getMvcInstance()->getView();
if ( file_exists(APPLICATION_CSS_FOLDER.'/'.
the
- $controllerName.'/'.
the - $actionName.'.css') )
{
the
- $view->assign('cssControllerAction'$controllerName.'/'.$actionName.'.css');
the - }
if ( file_exists(APPLICATION_JS_FOLDER.'/'.
the
- $controllerName.'/'.
the - $actionName.'.js') )
{
the
- $view->assign('jsControllerAction' $controllerName.'/'.$actionName.'.js');
the - }
the - }
the - }
* This source code was highlighted with Source Code Highlighter.Don't forget to Bootstrap the class connect created a plugin:
protected function _initFrontControllerPlugins()
{
the
- $frontController = Zend_Controller_Front::getInstance();
the - $frontController- > registerPlugin( new My_Controller_Plugin_Webinit() );
the - }
* This source code was highlighted with Source Code Highlighter.As is clear, used css and js files are placed under full analogy to embed scripts. Only instead of /application/views/script/controllerName/actionName/ root directory for them to be respectively public/css/ and public/js/. For this you need to declare three constants in index.php:
the - defined('APPLICATION_PUBLIC_FOLDER')
the - || define( 'APPLICATION_PUBLIC_FOLDER'
the - dirname(__FILE__) );
the
- defined('APPLICATION_CSS_FOLDER')
the - || define( 'APPLICATION_CSS_FOLDER'
the - realpath(APPLICATION_PUBLIC_FOLDER . '/css') );
the
- defined('APPLICATION_JS_FOLDER')
the - || define( 'APPLICATION_JS_FOLDER'
the - realpath(APPLICATION_PUBLIC_FOLDER . '/js') );
* This source code was highlighted with Source Code Highlighter.The plugin allows you to connect to our Layout necessary files with the following code:
<? if ($this->cssControllerAction) $this->headLink()->appendStylesheet('/css/'.$this->cssControllerAction)?>
<? if ($this->jsControllerAction) $this->headScript()->appendFile('/js/'.$this->jsControllerAction)?>
Open the browser and the required files joined.
The question remains with javascripta. We placed the code into an external file within the public directory. But there is a need, for example, display a welcome text on the basis of the dictionary function alert(). Of course, for translation use Zend_Translate, but then again, what if all our data is available only in the view script?
For your own needs, I found the perfect solution to the organization of namespaces. For example, to the interpreter inside a view script, we need a limited set of phrases. So we can arrange the storage of these phrases and give them the required handler-level js.
This is how it happens.
In the main js file of my project application.js is the setting global methods, objects, and handlers. Here you can add:
the - $(document).ready(function(){
the - $.TRANSLATION = {};
the - });
* This source code was highlighted with Source Code Highlighter.
Store oganesovna, you now need to fill it.
To do this in the view script we need the following code:
<script type="text/javascript">
the
- $(document).ready(function(){
the - $.data($.TRANSLATION "Nice to see you!" '<?=$this->translate("Nice to see you!")?>');
</script>
* This source code was highlighted with Source Code Highlighter.
To use the data from the repository we can use any function handling this phase of the project, through to store and retrieve the data:
alert( $.data($.TRANSLATION "Nice to see you!") );
* This source code was highlighted with Source Code Highlighter.
So, we get the following picture: for controller index, action index there is a file in the public directory /js/index/index.js that is a set of functions to work. All necessary data is written to the data store directly in the view script, and the vault itself is declared globally for all view scripts in the main js file of the application.
In the MVC model. A bit far-fetched, but still.
As the controller (response to user) is a plugin for frontController which is organizing the connection, the script of the layout and base — application.js.
As a model is the view script, accumulating data for the js repository.
As supports plug-in javascript code, fully responsible for client view.
In the vault, you can accumulate any data for future use.
Комментарии
Отправить комментарий