I am following a calculator tutorial from here: http://thecodeplayer.com/walkthrough/javascript-css3-calculator
However I am using nitrous as the IDE and Meteor. In this part of the code in the js file:
// Get all the keys from document
var keys = **document.querySelectorAll**("#calculator span");
var operators = ['+', '-', 'x', 'รท'];
var decimalAdded = false;
The 'document.querySelector All' part comes up with a not defined error. I have tried replacing it with the more Meteor friendly 'template. find' however then it just says that template is not defined. Any help would be very much appreciated. :)
Related
I can import the closure-compiler like this:
const ClosureCompiler = require('google-closure-compiler').compiler;
but that uses the java version. I have a limitation on the build machines at work such that I can't make use of java. I was hoping to force the compilation to use the native version. I've tried doing something like this:
const ClosureCompiler = require('google-closure-compiler-osx').compiler;
That seems to result in ClosureCompiler being undefined. I've gone around and around trying to find any documentation on the API exposed to javascript but I keep coming up with nothing.
If anyone has an idea about how to force native compilation rather than java compilation it would be much appreciated.
I think I've made some progress on this by looking at what's going on in the cli.js and util.js files inside node_modules/google-closer-compiler.
This pattern appears to be working:
const ClosureCompiler = require('google-closure-compiler').compiler,
compilerInstance = new ClosureCompiler({... setup opts ...});
// Force native compilation
let compilerPlatform = 'linux';
switch (process.platform) {
case 'win32': compilerPlatform = 'windows'; break;
case 'darwin': compilerPlatform = 'osx'; break;
}
compilerInstance.JAR_PATH = null;
compilerInstance.javaPath = require('google-closure-compiler-' + compilerPlatform);
compilerInstance.run((exitCode, stdOut, stdErr) => {
... do some stuff ...
});
i am new to handlebars. I am seeking for a general way to create code from templates via some kind of input data. I found handlebars quite good for this purpose. But wheras the documentation is centered on server side / browser online templating (html). My runtime would be the shell. I read and tried handlebars-cmd... with limited success. I don't know how to include my own helpers or libraries like handlebars-helpers in handlebars-cmd.
Can anybody help me with an example?
I was able to write a sample.
I hope this small piece of code can help others to run and test their templates as well as their helpers and partials ... perhaps it is worth to include this in a example directory or the documentation...
i would like to share my first rough sample that runs in node.js
just with
npm i handlebars
npm i handlebars-helpers
npm i minimist
node hbrscmd.js --in some.json --template template.hbs --out myresult.txt
content of hbrscmd.js:
var hbs = require('handlebars');
var helpers = require('handlebars-helpers')({
handlebars: hbs
});
var fs = require('fs');
var args = require('minimist')(process.argv.slice(2));
if (args.hasOwnProperty("v")) {
console.log(args);
}
var datastring = fs.readFileSync(args.in, 'utf8');
var data = JSON.parse(datastring);
if (args.hasOwnProperty("v")) {
console.log(data);
}
var templatefile = fs.readFileSync(args.template, 'utf8');
//console.log(templatefile);
var template = hbs.compile(templatefile);
var output = template(data);
fs.writeFileSync(args.out, output);
this works as i like.
No checking is made.
var dataPoints = [
new H.clustering.DataPoint(52, 1),
new H.clustering.DataPoint(52.1, 1)
];
var clusteringProvider = new H.clustering.Provider(dataPoints, {
clusteringOptions: {
minWeight: 1,
eps: 32
}
});
// clustering should be used with ObjectLayer
var clusteringLayer = new H.map.layer.ObjectLayer(clusteringProvider);
map.addLayer(clusteringLayer);
This is the code from the example from https://developer.here.com/documentation/maps/topics_api/h-clustering-provider.html
I am referencing provided Here Maps JS libraries (version 3.0).
The error I am getting from today is "TypeError: f.pb is not a function" at the initialization of H.clustering.Provider object. The same code worked on Friday. Not sure what is going on?
I stumbled over the same error. Apparently the old example had a link to the clustering code under
https://js.api.here.com/v3/3.0/mapsjs-clustering.js
The current example loads that code from
https://js.cit.api.here.com/v3/3.0/mapsjs-clustering.js
- the same sub-domain as the other scripts.
I guess the two sub-domains are no longer in sync and mixing the minified scripts fails due to different field names.
I am little new to wordpress. I have tried so many different attempts trying to make this work but can seem to resolve the issue.
It keeps saying that ML_MOVIE_LISTING is undefined, when i try to localize it.
Below is my php code and javascript file.
Any help would really appreciated. Thanks!
function admin_scripts (){
wp_enqueue_style("admin-style",plugins_url("style-admin.css",__FILE__));
wp_enqueue_style("jquery-ui","https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/external/jquery/jquery.js");
wp_enqueue_script("main_js",plugins_url("main.js",__FILE__),["jquery","jquery-ui-sortable"]);
wp_localize_script("ml-script","ML_MOVIE_LISTING",[
"token"=>wp_create_nonce("ml-token")
]);
}
add_action("admin_init","admin_scripts");
JS CODE
jQuery(document).ready(function($){
var movie_sort_list = $(".movie-sort-list"),
order_save_msg = $(".order-save-msg"),
order_save_error = $(".order-save-err");
console.log(ML_MOVIE_LISTING);
}
I just found out the reason why it wasn't working was because the name in the first parameter was different then the name of the first paramaeter in
wp_enqueue_script() They both have to be the same as shown below
wp_enqueue_script("main_js",plugins_url("main.js",__FILE__),["jquery","jquery-ui-sortable"]);
wp_localize_script("main_js","ML_MOVIE_LISTING",[
"token"=>wp_create_nonce("ml-token")
]);
How to manually use the precompiled handlebars.js templates?
Let's say, we have
source = "<p>Hello, my name is {{name}}</p>"
data = { name: "Joe" }
Currently, I have
template = Handlebars.compile(source)
render: -> template(data)
The source is coming from the database, and in order to cut down on the compilation time, I want to use a compilation step, precompiling the template server side with Handlebars.precompile(source) and then using something like:
template = precompiled_template
render: -> precompiled_template(data)
The precompiled_template is a string with function definition, so that doesn't work.
Also, I've found that Hanlebars.compile(source)() == Handlebars.precompile(source), but after browsing the source codes of handlebars, it's compilers and runtime, I'm still not sure how to achieve this.
if you did not find the right question till now, the answer is pretty simple.
Handlebars comes with a C pre-compiler on the command line, if you can access your shell you can simple just compile your templates each separated or merge them together into one file.
you can install Handlebars via npm / or build it on your system.
on the shell you can access the help file
$> Handlebars [ENTER]
You will see a help file like >
- f --output Output File etc etc ..
- m --min Minimize Output
$> Handlebars mysupertemplate.handlebars -f compiled.js -m ("-m" if
you want to minify the js file)
To run Handlebars.compile in the browser is a huge loss in performance, so it's worth a try to precompile on the server before sending the file to the browser.
To register Handlebars templates in your browser you have to load them like this:
var obj = {"foo":"bar"}
var template = require("./mytemplate-file.js") // require.js example
template = template(Handlebars) // Pass Handlebars Only if the template goes mad asking for his Father
var html = Handlebars.templates[template-name](obj)
For example if you have more then one template registered in the "templates-file" you will be able to access after the require call all templates by name using
var html = Handlebars.templates["templateName"]({"foo":"bar"});
You can go even further by register all the know helper within the file and / or making custom helpers for partials like so..
*// This will be the helper in you app.js file*
Handlebars.registerHelper("mypartials", function(partialName, data) {
var partial = Handlebars.registerPartial(partialName) || data.fn
Handlebars.partials[partialName] = partial
})
And in your template file you can put this...
{{#mypartial "divPartial"}}
<div id="block"><h2>{{foo}}</h2><p>{{bar}}</p></div>
{{/mypartial}}
{{#mypartial "formPartial"}}
<form id="foo"><input type="text" value="{{foo}}" name="{{bar}}"></form>
{{/mypartial}}
Now you can access this files by calling
var html = Handlebars.partials["divPartial"]({"foo":"bar","bar":"foo"})
var formHtml = Handlebars.partials["formPartial"]({"bar":"bar","foo":"foo"})
Hope this helped a bit ..
This speed test http://jsperf.com/handlebars-compile-vs-precompile/3 gave the answer.
Apparently, one solution is to eval() that resulting string and it will work.
The code is
var data = { name: "Greg" };
var source = "<p>Howdy, {{ name }}</p>";
eval("var templateFunction = " + Handlebars.precompile(source));
var template = Handlebars.template(templateFunction);
template(data);
=> "<p>Howdy, Greg</p>"
Of course one needs to be careful with eval and probably a better solution exists.