I wonder how to work with sync data and handlebar helpers. I want to load cms messages to a single page application and I tried out following method and could not able to achieve it.
Please see following code.
function loadCmsMessage(key) {
var cms = {
"msg.001": "Hello {0} {1}"
};
var deferred = $.Deferred();
setTimeout(function () {
var msg = cms[key];
deferred.resolve(msg);
}, 1000);
return deferred.promise();
}
Handlebars.registerHelper('cms', function (key, arr) {
var promise = loadCmsMessage(key);
promise.done(function (str) {
str = Handlebars.Utils.escapeExpression(str);
if ($.isArray(arr)) {
$.each(arr, function (i) {
var safeStr = Handlebars.Utils.escapeExpression(arr[i]);
str = str.replace("{" + i + "}", safeStr);
});
}
var result = '<span class="cms-data">' + str + '</span>';
return new Handlebars.SafeString(result);
});
});
$(document).ready(function () {
var template = Handlebars.compile($("#myTemplate").html());
$("#wrap").html(template({
"person": ['Jane', 'Fonda']
}));
});
You can't. The return statement is at the inner function of the Promise. Handlebars helpers don't allow asynchronousness.
Related
I have below serviceURL Angular Provider in my project.
app.provider("serviceURL", function () {
var cartServiceBaseSite = '';
var domainName = '';
var GetRatingURL = domainName + '/comments.getComments?format=jsonp&callback=JSON_CALLBACK&data={0}&&order={1}='
return {
setCartServiceBaseSite: function(value){
cartServiceBaseSite = value;
},
setDomainName: function(value){
domainName = value;
},
$get: function () {
return {
GetServiceURL: function(serviceConstantURLName, paramsArray){
var requestURL = eval(serviceConstantURLName);
for(var i = 1; i <= paramsArray.length; i++) {
requestURL = requestURL.replace(new RegExp('\\{' + (i-1) + '\\}', 'gi'), paramsArray[i-1]);
}
return requestURL;
}
}
}
};
});
I am setting cartServicebaseSite & domainName variable which is as good as constants from angular config block.
var app = angular.module('myModule', []);
app.config(['serviceURLProvider', function (serviceURLProvider) {
serviceURLProvider.setCartServiceBaseSite('US_BASESITE');
serviceURLProvider.setGigyaDomainName('http://somerandom.com');
}]);
I am injecting this serviceURL provider in a controller and getting a URL back after proper setup.
Controller code:
myModule.controller('T', ['serviceURL', function (serviceURL){
var paramsArray = [];
paramsArray[0] = 'dataValue';
paramsArray[1] = 'orderValue';
serviceURL.GetServiceURL('GetRatingURL', paramsArray);
}]);
in Provider block when I call GEtServiceURL method I am passing parameters as 'GetRatingURL' which is nothing but a variable in provider block.
I am using eval expression to evaluate that, where I am not getting domainName value which we have set it from setDomainName.
current output - '/comments.getComments?format=jsonp&callback=JSON_CALLBACK&data=dataValue&order=orderValue'
expected output - 'http://somerandom.com/comments.getComments?format=jsonp&callback=JSON_CALLBACK&data=dataValue&order=orderValue'
issue is domainName is not getting set in GetRatingURL.
can anyone help on this or what should be the approach to handle this situation.
Add a console.log to see what is happening:
return {
setCartServiceBaseSite: function(value){
cartServiceBaseSite = value;
//ADD console.log
console.log("Setting BaseSite "+value);
console.log("GetRatingURL= "+ GetRatingURL);
},
The results should tell you what you need to know.
I have the following perfectly working code (written by someone else). The problem is that if I simply rename the attr method, I get an error. For example, I rename the method to attrx and get this error:
TypeError: arg.attrx is not a function
Here is the working code:
function Action(name) {
this.attr = function(n) {
if (n=="name") {
return "action";
}
},
this.val = function() {
return name;
};
}
Action.prototype.toString = function() {
return "&" + this.attr("name") + "=" + this.val();
}
When a user triggers an event, the following function is called:
function serializeElements() {
var result = "";
for(var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
result += (arg.attr("name") + "=" + arg.val() + "&");
}
return result;
}
Here is the identical code above but it has the attr method renamed to attrx:
function Action(name) {
this.attrx = function(n) {
if (n=="name") {
return "action";
}
},
this.val = function() {
return name;
};
}
Action.prototype.toString = function() {
return "&" + this.attrx("name") + "=" + this.val();
}
function serializeElements() {
var result = "";
for(var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
result += (arg.attrx("name") + "=" + arg.val() + "&");
}
return result;
}
I cannot figure out the reason that the code does not work (see error at top of message) after I rename the method to attrx or anything else for that matter.
Note: The web page does include jQuery, but I don't think that is what causes the problem.
Here is the code used to call serializeElements:
function addStatesListener() {
$("#states").on("change", function(e) {
var form = $(this.form);
var url = form.attr("action");
var type = form.attr("method");
// pass 1) jQuery 'country' and 'state' objects and 2) a query string fragment, e.g.: '&action=change_state'
var data = serializeElements($("#countries"), $("#states"), new Action("change_state"));
e.preventDefault();
$.ajax({
url: url,
type: type,
data: data,
dataType: "html", // The type of data that you're expecting back from the server
success: function(result) {
$("#cities").html(result); // list of all cities, e.g.: <option value="Albany"</option>
}
});
});
}
The proper answer to your question is want already catch #dinesh, you are passing 3 arguments to your function, and only the third is an Action with the .attrx method you changed.
Considering you are working on jquery objects, and if you want to clean your code, you could use .serialize() method instead of calling the couple .attr() and .val().
.serialize() is the jquery method to serialize form objects.
So you can change your code as follow:
function Action(name) {
this.serialize=function() {
return 'name='+encodeURI(name);
}
}
And then your function serializeElements:
function serializeElements() {
var args = Array.prototype.slice.call(arguments);
return args.reduce(function(a, b){
if (a) return a.serialize() + '&' + b.serialize();
if (b) return b.serialize();
});
}
Then you can call it so:
var data = serializeElements($("#countries,#states"), new Action("change_state"));
As you see, you could put form elements in a comma separated list on jquery selector.
That's it.
I have the following script on http://foobar.com/api?callback=mycallback:
var something = 'aaa';
var callback = mycallback;
(function() {
var output = eval(something);
callback(output);
});
And I want to access this script from my own script, and fetch the output. So I am doing the following:
var module1 = (function() {
var getFromApi = function(output) {
return (function(output) {
var script = document.createElement('script');
script.setAttribute('src', 'http://foobar.com/api?callback=mycallback');
document.getElementsByTagName('head')[0].appendChild(script);
});
};
var fetch = function() {
getFromApi(function(output) {
console.log(output);
});
};
return {
fetch: fetch
};
})();
module1.fetch();
The result should be the output from this script, but it is not, it doesn't even enters the callback. How can I do this properly?
There are some problems in module1:
getFromApi returns a function (let's call it fn)
fn has a parameter named output that shadows the argument of the outer function making the argument passed to getFromApi useless
fetch calls getFromApi and it does nothing else
the callback function must be globally accessible
A possible solution could be:
var module1 = (function() {
var getFromApi = function(output) {
var script = document.createElement('script');
script.setAttribute('src', 'http://foobar.com/api?callback='+output);
document.getElementsByTagName('head')[0].appendChild(script);
};
var fetch = function() {
getFromApi('myfunction');
};
return {
fetch: fetch
};
})();
function myfunction(output) {
console.log(output);
}
module1.fetch();
Possible nasty solution for function as callback (It will not work in IE but can be adapted)
var module1 = (function() {
var getFromApi = function(output) {
var script = document.createElement('script');
script.setAttribute('src', 'http://foobar.com/api?callback=eval(document.currentScript.dataset.fn)');
script.setAttribute('data-fn', '(function(){ return ' + output +'})()');
document.getElementsByTagName('head')[0].appendChild(script);
};
var fetch = function() {
return getFromApi(function(output){
console.log(output);
/*remember to remove script tag*/
document.currentScript.remove();
});
};
return {
fetch: fetch
};
})();
module1.fetch();
When i request
BASE_URL + 'json/valueone?callback=fnCallBack0'
the response from server is treated in a callback function. This function receives (ASYNCHRONOUS) data (JSON format) but do not include the initial parameter "valueone"
var BASE_URL = ...
function fnCallBack(data){
if (data != null) {
// HERE...I NEED ID <====================
// arguments.callee.caller <==================== dont work
console.log('information', data);
}
}
// onclick callback function.
function OnClick(info, tab) {
var arrH = ['valueone', 'valuetwo'];
arrH.forEach(function(value) {
var scrCallBack = document.createElement('script');
scrCallBack.src = BASE_URL + 'json/' + value + '?callback=fnCallBack';
//BASE_URL + 'json/one?callback=fnCallBack0';
document.body.appendChild(scrCallBack);
});
My solution is to create an intermediate function correlative name (fnCallBack0, fnCallBack1, ...), a global array, and a counter. Works fine, but this is not OOP, is a fudge.
var BASE_URL = ...
//global array
var arrH = [];
var fnCallBack0 = function(data){
fnCallBack(data, '0');
}
var fnCallBack1 = function(data){
fnCallBack(data, '1');
}
function fnCallBack(data, id){
if (data != null) {
console.log('information', data + arrH[id]);
}
}
// onclick callback function.
function OnClick(info, tab) {
var i = 0;
arrH = ['valueone', 'valuetwo'];
arrH.forEach(function(value) {
var scrCallBack = document.createElement('script');
scrCallBack.src = BASE_URL + 'json/' + value + '?callback=fnCallBack' + (i++).toString();
//BASE_URL + 'json/one?callback=fnCallBack0';
document.body.appendChild(scrCallBack);
});
chrome.contextMenus.create({
title: '%s',
contexts: ["selection"],
onclick: function(info) {console.log(info.selectionText)}
});
var idConsole = chrome.contextMenus.create({
title: 'console',
contexts: ["selection"],
onclick: OnClick
});
I tried with inject function as code in html page, but i receeived "inline security error", and a lot of similar questions.
Please, NO AJAX and no jQuery.
This is my first post and my first chrome extension
Thanks in advanced.
I don't see how anything of this has to do with OOP, but a solution would be to just create the callback function dynamically so that you can use a closure to pass the correct data:
function fnCallBack(data, value){
if (data != null) {
console.log('information', data + value);
}
}
// onclick callback function.
function OnClick(info, tab) {
['valueone', 'valuetwo'].forEach(function(value, index) {
// unique function name
var functionName = 'fnCallback' + index + Date.now();
window[functionName] = function(data) {
fnCallBack(data, value);
delete window[functionName]; // clean up
};
var scrCallBack = document.createElement('script');
scrCallBack.src = BASE_URL + 'json/' + value + '?callback=' + functionName;
document.body.appendChild(scrCallBack);
});
}
Hi now I know that NodeJS is asynchronous (which I am still trying to get my head around to be honest).
The problem that I am currently facing is I have attempting to do a http.request to receive some JSON data. This is fine but what I need is to return this data to a variable. I believe I need to do a callback function? (from what I have read up on the matter)
The Code that I currently have:
var http = require('http');
pCLatLng = '';
function postCodeCheck() {
var pCode = {
host: 'geo.jamiethompson.co.uk',
path: "/" + 'SW1A2AA' + ".json"
};
http.request(pCode).on('response', function(response) {
var data = '';
response.on("data", function (chunk) {
data += chunk;
});
response.on('end', function () {
pCJSON = JSON.parse(data);
pCLatLng = pCJSON;
});
}).end();
}
console.log(pCLatLng);
This is obviously outputting "undefined"; I have tried returning the response.on('end') when having return "hi" or anything inside it instead NodeJS outputs the information about the site. If anyone can help with this it would be much appreciated.
console.log(pCLatLng); needs to be inside (or inside something called by) the response.on('end' callback. The value isn't available until that callback is fired.
Try something like:
function postCodeCheck(callback) {
var pCode = {
host: 'geo.jamiethompson.co.uk',
path: "/" + 'SW1A2AA' + ".json"
};
http.request(pCode).on('response', function(response) {
var data = '';
response.on("data", function (chunk) {
data += chunk;
});
response.on('end', function () {
callback(JSON.parse(data));
});
}).end();
}
postCodeCheck(function (pCLatLng)
{
console.log(pCLatLng);
});
You want something like this:
var http = require('http');
function postCodeCheck(cb) {
var pCode = {
host: 'geo.jamiethompson.co.uk',
path: "/" + 'SW1A2AA' + ".json"
};
http.request(pCode).on('response', function(response) {
var data = '';
response.on("data", function (chunk) {
data += chunk;
});
response.on('end', function () {
var pCJSON = JSON.parse(data);
cb(pCJSON);
});
}).end();
}
postCodeCheck(function(pCLatLng) { console.log(pCLatLng); });
Look carefully for the differences before using.
You'll need your postCodeCheck() function to take a callback as well, just like http.request. In the world of async, calling callbacks with results takes a similar role to returning results.