In my CakePHP app, I am defining a Wizard vendor that outputs the HTML for a multistep Wizard type plugin, along with its relevant Javascript code. I'm wanting to use the JsHelper so that I can buffer my code to the bottom of the page.
Everything else is working, including my Javascript code if I just output it directly with the HTML. I just can't quite figure out how to use the JsHelper. Do I use a App:Uses or App:Import statement? When using it in a View, I can just define it on the controller level, but that doesn't work here.
$this->Js->buffer("
$('.mws-wizard').wizard({
buttonContainerClass: 'mws-button-row',
orientation: '$orientation',
forwardOnly: $forwardOnly
});
");
If you are developing this 'vendor' package yourself, you should not develop it as a 'vendor', but as a plugin.
The vendor folders are meant for including third-party libraries that are not developed with CakePHP in mind (for example to use parts of the Zend Framework in your application).
From the manual:
Note: Loading vendors usually means you are loading packages that do not follow conventions. For most vendor packages using App::import() is recommended.
Create a plugin not a vendor
To develop re-usable code that can be used with different projects/applications, develop your code as a Plugin. Plugins are basically 'mini CakePHP applications'. Classes from a plugin can be used inside your application and vice-versa; a plugin can use CakePHP helpers the same way as you use them in your application.
See Creating Your Own Plugins
Regarding the JsHelper
Contrary to the comment placed by Sam Delaney, your usage of the JsHelper looks fine to me. Adding some script to the Js buffer to output it in the layout seems useful. Just don't try to use it for extended blocks of JavaScript; that should be put in external .js files.
I do recommend to write the JavaScript code yourself and not have the JsHelper generate the code for you (e.g. Don't use $this->Js->get('#foo')->event('click', $eventCode);). This may be personal, but IMO this makes it harder to track/debug your JavaScript and isn't any more readable than just $('#foo').click('event code');
I've personally never found any use for the JavaScript helper in CakePHP as if you're not careful, you end with getting <script> tags littering your markup, which sometimes makes it quite difficult to debug. From what you describe, you have the JavaScript aggregated and appended at the bottom of your HTML so it isn't as bad as the situation I highlight previously.
Is it not possible to relocate all your JavaScript to .js files to encapsulate all the function for your wizard plugin/vendor? If you could do this, it would be in keeping with MVC principles where you could logically separate the view markup and presentation logic.
Related
I have developed a custom Joomla template, and I need to add a piece of custom javascript to a Joomla core module (mod_articles_news), without a plugin, if possible (this should be so simple that I don't think I want to use a third party plugin for that). And async, if possible.
I have been searching thoroughly, but haven't found the perfect solution. Either they want me to install a plugin or the solution refers to a custom written module (suggesting to add JS before installation of module) while I am dealing with a core module (Articles Newsflash) that is already installed per definition. (The reason I need to use JS is to make a conditional design change, presently not possible with CSS).
I have been following the steps outlined here, but to no avail. Namely, I added the following code into the module's template folder (mod_articles_news/tmpl/my-template-name.php)
<?php
JHtml::script(Juri::base() . 'templates/my-template-name/js/myScript.js');
?>
(Of course, I have added the myScript.js file into the above location).
When checking it live, nothing happens, the browser is not loading my JavaScript at all (the script itself is tested and it works).
Please help me what I am missing here. Thank you in advance!
If you want to do customization you should use a Joomla! template for this. A template determines the basic HTML including the necessary CSS/JS for your site. In addition it can contain overrides for modules and components so you can do even more customization without touching any of the original code.
What you want to do sounds like a simple customization. Just add any CSS/JS which is necessary to achieve your task to the template.
You could try
<?php
JHTML::script('templates/my-template-name/js/myScript.js');
?>
alternatively, is there any reason you can't add it via your custom template, as suggested by Sven Bluege
Im developing a ember.js based app.
On some "sites" (templates) I want to load a specific js-game, so I have to include extra tags like <script src="game.js"></script>. But since handlebar-templates are defined by <script>-Tags itself, its not possible to simply put my dependencies within a template directly.
How can I include js-files on some individual sites only?
Including files in an Ember.js application is a bit more complex than in a regular website.
If you do not use ember-cli, then you could either include your all your JavaScript files directly in your index.html (one by one) or (and this is better) you could also bundle all your game JavaScript files into a single file (called games.js for instance) and include that single file in your index.html. You can bundle JavaScript files using tools such as grunt or brunch or broccoli.
Now if you do use ember-cli (which I recommend), then you could simply list your files in your Brocfile.js (see documentation here). Learning ember-cli might take a little bit of extra time but it will really help you in the future :)
Good luck!
Ok I found an possibility to solve that problem:
Like described in the handlebars.js-FAQ here (5.), I have to use some kind of a "Hack" to avoid parsing errors. Just need to add an empty command {{!}} into the word "script" like <scr{{!}}ipt src=...>...</scr{{!}}ipt.
That works for me.
Also, as kpdecker says here, it is better to use precompiled templates than defining them inline.
You can try to insert the necessary scripts from didInsertElement hook of the corresponding view. And, if so, in order to avoid duplicates, remove that scripts in willDestroyElement hook of the same view.
As a ASP.NET MVC developer, I am trying to wrap my head around JavaScript AMD modules and libraries like RequireJS.
What is the relationship between ASP.NET MVC ScriptBundles and RequireJS?
In a large site with lots of JavaScript, should I be using both? Or one of them?
Should I integrate RequireJS with Bundles using IBundleTransform?
I wouldn't see using the two of these together. With Bundles you would have all your JavaScript loaded, ideally into just one or two bundles, on your layout controller. In production it would be optimized (combining into one file, minimised, cached and compressed etc).
RequireJS the way I see some of it is if you are being more granular about what JS is loaded and then you can use it's terse syntax to ensure a certain file is loaded before invoking some of that file's JavaScript.
I would recommend using Bundles since you are working with asp.net-mvc. They are pretty to use and work very well. I had used a similar pre mvc4 framework called Combres which was similar and this approach works very well for apps I think. It may be different for read only web sites.
Ext JS base and widgets together offer me the solution I've been looking for. The Ext JS library is somewhat heavy w.r.t. conventional standards.
There are several widgets in the library that I am not using. So I want to know if it is possible to remove the corresponding code (of widgets not being used) from the ext-all.js ?
To put it in other words, is it possible to compose a master Java Script of Ext JS that comprises of only the widgets of my interest? If there is a way I'd love to know.
Yes, though some of the components are easier to remove than others, as there are dependencies.
Use JSBuilder. http://www.extjs.com/products/jsbuilder/
You need Java to run it.
Then, in the extjs distribution there is a file in each branch named "ext.jsb2", which is the JSBuilder project file.
Copy that file to something like "ext-custom.jsb2", then carefully remove components you don't need, then run a command like this:
java -jar JSBuilder2.jar --projectFile C:\extjs\branches\ext-3.1.x\ext-custom.jsb2 --homeDir C:\ext-custom
The output will be in the custom directory, and you'll have ext-all.js, etc. with just your stuff.
Yes, it is possible. That tool is available on their site.
JSBuild2 is created by ExtJS team for that purpose. You just edit ext.jsb2 file appropriately.
There is an old page and a forum thread.
I'm trying to somehow render out javascript for a particular user control rather than just having a script include for the javascript file.
The reason why I don't want a simple script include is because I need to append unique ClientID's to the dom elements at runtime.
I could hardcode the javascript in a function and just append the ClientIDs. However, this will look messy and I'm not liking the idea of hardcoding javascript code in a class- it would be a nightmare to maintain.
What are some strategies that I can use to keep javascript/markup separate from the compiled code? I want to somehow have the javascript source included in the assembly as well so that as a user control, it would not require manual script includes and have no other dependencies for it to work.
I used this code from Rick Strahl's blog. Works awesome with jQuery and those types of libraries. http://www.west-wind.com/WebLog/posts/252178.aspx
HTH,
ck
PS If you're using a Web Application Project you can use javascript files as embedded resources.