I have written over 2500 lines of code within the Knack JavaScript console and find it to be more and more difficult. I would love to use an IDE like Brackets with Knack, but lazyloading an external script in Knack has wreaked havoc on my code due to scope changes. I don't mind reworking things, but I just can't seem to get it to work.
Does anybody have any suggestions?
Andrej,
Thanks for your response! I found a solution last night (more in a moment), and the web address describing it is the same one in your post (http://helpdesk.knackhq.com/support/solutions/articles/5000447139-customization-with-jquery-and-javascript#knack-init).
For me, instead of using LazyLoad to load the external JS file, and because I'm embedding the database in an HTML file, I used a typical <script src="myfile.js"> call in footer of the document. Then, inside myfile.js, all of my jQuery calls are wrapped in the following function:
window.KnackInit = function ($) {
// .. code goes here
}
And that's it! I should have read the documentation more closely. :-)
-Saul
Saul, I had the same experience. Knack described the problem on this page:
All the Knack libraries should be loaded before you define event handlers. According to the mentioned article you should wrap all event handlers into KnackInit() function. Knack should run this function after all libraries are loaded. However this method actually didn't work for me. I defined KnackInit functions with all my handlers inside. The function was called like it should be by Knack, but handlers didn't worked. I have asked Knack support for help and Sam send this code which works like a charm:
// load JS files in such a way that all Knack event handlers will work :-)
KnackInitAsync = function ($, callback) {
window.$ = $;
LazyLoad.js(['YOUR EXTERNAL JS FILE NAME HERE'], function () {
console.log('External JS file have been loaded');
callback();
});
}
Just put your JS filename in the code above. This should be put in Javascript section of Api&Code settings in Knack. In my setup this is the only content of this section (besides another line to Lazyload CSS file). All other code right now I have in external file. All event handlers work without any problems.
Let me know if this will help you.
Andrzej
Andrzej, thanks for adding your response to this thread.
I've found that all of my jQuery calls don't work anymore. They're all broken. Something like this:
$(document).on('knack-page-render.any', function (event, view, data) {
console.log ('got here') ;
}
works fine when it's inserted into the Custom JavaScript screen in the API & Code section of the backend. But it doesn't work when it's it an external JavaScript file that has been loaded via LazyLoad.js (['url']).
After a great help from Sam Gladstone from Knack I have managed to have all my JS and CSS code out of Knack. I do not experience any kind of scope problems you mention.
My setup is like this:
- My Knack app is embedded on my own website
- I am using Rapidweaver for Mac to create my website - it is easy to use but not pro in terms of direct coding, so I am not doing that inside Rapidweaver
- instead I am using TextWrangler to edit my css and JS files directly on website (with local copy)
- I am using the following code in JS editor i Knack:
// load external CSS files
var css_files = [cssFile_url];
LazyLoad.css(css_files, function () {
console.log('External CSS-es have been loaded');
});
// load JS files in such a way that all Knack event handlers will work 
KnackInitAsync = function ($, callback) {
window.$ = $;
LazyLoad.js([jsFile_url], function () {
console.log(‘External JS file have been loaded’);
callback();
});
}
I tried before Lazyload with wrapping for Knack.init() but this method described in Knack documentation does not work for Knack event handlers. Solution above provided by Sam resoled the problem.
So as to now I am able to do all my programming outside of Knack.
Andrzej
Ian, I'm in a similar boat: I want to store my JS and CSS in actual files that are subject to revision control.
A question for you about scope. I am using Lazyload to load an external JS file, but as you mentioned it changes jQuery's scope. Did you identify what the correct scope syntax is supposed to be?
$( 'selector', scope ).method()
I haven't figured out what "scope" is supposed to be in the above pseudo-code.
Thanks.
Saul
Hi Ian - fantastic question, I reckon one of the huge strengths Knack has is the JS & CSS console but like you my code just keeps expanding without being manageable there.
Might not be an answer but I'be started using Notepad++ via copy/paste when I need more power for either JS or CSS code. Copy from knack into Notepad++, save the file with a date, use Notepad++ functions with the file for more power, paste back into Knack (Ctrl+A, Ctrl+V familiar routine), save and test...
That works better for me being a newbie to JS & CSS after moving from MS Access - yes I'm that old.
I also trialled using MS Visual Studio the same way but found notepad++ easier and quicker to use.
I do wonder if there's way to connect directly to the JS & CSS code via the api, and therefore setting Visual Studio to load the code and save over the wire...