External handlebars templates backbone marionette - marionette

In my application i added Marionette.sync plugin and override these methods:
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (templateId, callback) {
var tmpId = templateId.replace("#", ""),
url = "/app/templates/" + tmpId + ".html";
$.get(url, function (templateHtml) {
compiledTemplate = Handlebars.compile($(templateHtml).html())
callback.call(this, compiledTemplate);
});
};
Backbone.Marionette.Renderer.renderTemplate = function (template, data) {
template(data);
};
But this not work, any ideas?

I assume you're running v0.9 of Marionette since you mention the Marionette.Async plugin.
The Renderer change is slightly off in the method name, and nothing is calling your TemplateCache object anymore.
If you're intending to use pre-compiled Handlebars functions, then you only need to do this:
Backbone.Marionette.Renderer.render = function(template, data){
return template(data);
};
If you intend to have the template loaded asynchronously and then compiled, using the TemplateLoader, your code would need to look like this:
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function (templateId, callback) {
var tmpId = templateId.replace("#", ""),
url = "/app/templates/" + tmpId + ".html";
$.get(url, function (templateHtml) {
compiledTemplate = Handlebars.compile($(templateHtml).html())
callback.call(this, compiledTemplate);
});
};
Backbone.Marionette.Renderer.renderTemplate = function (templateId, data) {
var renderer = $.Deferred();
Backbone.Marionette.TemplateCache.get(templateId, function(template){
var html = template(data);
renderer.resolve(html);
});
return renderer.promise();
};
The Renderer is responsible for calling the TemplateCache.
Side note: what article / blog post / wiki page / documentation were you using to get your code from? I have probably missed some pages that need to be updated.

Related

How to Access Parameters in New Form

I have a custom button that I have the below JavaScript attached to that opens an entity form and I am trying to pass viewName to it.
function sendContextToQC(selectedControl) {
var entityFormOptions = {};
entityFormOptions["entityName"] = "new_qrecipemasteritem";
entityFormOptions["useQuickCreateForm"] = true;
var currentView = selectedControl.getViewSelector().getCurrentView().name;
var formParameters = {};
formParameters["viewName"] = currentView
Xrm.Navigation.openForm(entityFormOptions, formParameters).then(
function (success) {
console.log(success);
},
function (error) {
console.log(error);
});
}
The form opens fine and I have the "Pass Execution Context as first parameter" checked, but I don't know how to access the formparameters object. Is it part of the executionContext? I even tried adding another parameter (formParameters), but that didn't work either.
2/14/23
You can access the form parameters from within the form by using the getFormContext() method. Here's an updated version of your code that shows how to access the formParameters object from within the form:
function sendContextToQC(selectedControl) {
var entityFormOptions = {};
entityFormOptions["entityName"] = "new_qrecipemasteritem";
entityFormOptions["useQuickCreateForm"] = true;
var currentView = selectedControl.getViewSelector().getCurrentView().name;
var formParameters = {};
formParameters["viewName"] = currentView;
Xrm.Navigation.openForm(entityFormOptions, formParameters).then(
function (success) {
var formContext = success.getFormContext();
var viewName = formContext.getAttribute("viewName").getValue();
console.log("View Name: " + viewName);
},
function (error) {
console.log(error);
});
}
In the success callback of the openForm method, you use getFormContext() to get a reference to the form context, and then use that reference to access the viewName attribute. You can then use the getValue() method on the attribute to retrieve its value.
In function Xrm.Navigation.openForm argument formParameters is an object holding field values. The function passes these values to the fields that are (should be) on the form opened by it.
It is possible to pass custom query string parameters to the form. These parameters can be retrieved accessing the window.location object.
See openForm - MS Learn and Configure a form to accept custom querystring parameters - MS Learn.
The (classic) Form Properties dialog has a Parameters tab where custom parameters can be declared. Custom parameters that have not been configured here can only be passed in a plain url by adding an extraqs parameter.
I figured it out. To send parameter:
function sendContextToQC(selectedControl) {
var entityFormOptions = {};
entityFormOptions["entityName"] = "new_qrecipemasteritem";
entityFormOptions["useQuickCreateForm"] = true;
var currentView = selectedControl.getViewSelector().getCurrentView().name;
var formParameters = {};
if (currentView.includes("Master") == true) {
formParameters["isMasterView"] = 1;
}
else {
formParameters["isMasterView"] = 0;
}
Xrm.Navigation.openForm(entityFormOptions, formParameters).then(
function (success) {
console.log(success);
},
function (error) {
console.log(error);
});
}
Then to pick it up onload:
this.hideUsedIn = function(executionContext) {
let formContext = executionContext.getFormContext();
let usedInAttribute = formContext.getAttribute("new_usedin");
let usedInControl = formContext.getControl("new_usedin");
let buttonData = {};
buttonData = Xrm.Utility.getPageContext().input.data;
let isMasterItem = buttonData.isMasterView;
if (isMasterItem === 1){
usedInAttribute.setRequiredLevel("none");
usedInControl.setVisible(false);
}
}

Get an specific file from an specific folder

Hi Im doing a Windows 8 Javascript App, y what to know how to get a file witch name is example2.dat from C:\Users\Me\Pictures\thifolder I tried using Windows.Storage.StorageFile.getFileFromPathAsync("C:\Users\Me\Pictures\thisfolder");
but it didnt work since i have another files like example1.dat, example3.dat example.jpg etc.
Hope i made my self clear, thanks in advance
Here is my code so far
function here() {
var getJsonStringAsync = function () {
return Windows.Storage.StorageFile.getFileFromPathAsync("C:\Users\Me\Pictures\thisfolder")
//Also tried this
//return Windows.Storage.KnownFolders.picturesLibrary.getFileAsync(u_u + "_" + u + "_" + ".dat")
.then(function (file) {
return Windows.Storage.FileIO.readTextAsync(file);
});
};
getJsonStringAsync().then(function (text) {
document.getElementById("line").innerHTML = text;
});
}
The correct way to read a file in the pictures library is this:
(don't forget to declare in the manifest of your app the access to the picturesLibrary)
var getJsonStringAsync = function () {
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
return picturesLibrary.getFolderAsync("thisfolder").then(function (folder){
return folder.getFileAsync("example2.dat").then(function (file) {
return Windows.Storage.FileIO.readTextAsync(file);
});
});
};
In JavaScript, here is how to play "song.mp3" which is in the music library:
Html:
<audio id="player1">Your browser does not support audio </audio>
JavaScript:
var ml = Windows.Storage.KnownFolders.musicLibrary;
ml.getFileAsync("song.mp3").then(function (file) {
// its a storage file, so create URL from it
var s = window.URL.createObjectURL(file);
player1.setAttribute("src", s);
player1.play();
//});
});

How can I catch and process the data from the XHR responses using casperjs?

The data on the webpage is displayed dynamically and it seems that checking for every change in the html and extracting the data is a very daunting task and also needs me to use very unreliable XPaths. So I would want to be able to extract the data from the XHR packets.
I hope to be able to extract information from XHR packets as well as generate 'XHR' packets to be sent to the server.
The extracting information part is more important for me because the sending of information can be handled easily by automatically triggering html elements using casperjs.
I'm attaching a screenshot of what I mean.
The text in the response tab is the data I need to process afterwards. (This XHR response has been received from the server.)
This is not easily possible, because the resource.received event handler only provides meta data like url, headers or status, but not the actual data. The underlying phantomjs event handler acts the same way.
Stateless AJAX Request
If the ajax call is stateless, you may repeat the request
casper.on("resource.received", function(resource){
// somehow identify this request, here: if it contains ".json"
// it also also only does something when the stage is "end" otherwise this would be executed two times
if (resource.url.indexOf(".json") != -1 && resource.stage == "end") {
var data = casper.evaluate(function(url){
// synchronous GET request
return __utils__.sendAJAX(url, "GET");
}, resource.url);
// do something with data, you might need to JSON.parse(data)
}
});
casper.start(url); // your script
You may want to add the event listener to resource.requested. That way you don't need to way for the call to complete.
You can also do this right inside of the control flow like this (source: A: CasperJS waitForResource: how to get the resource i've waited for):
casper.start(url);
var res, resData;
casper.waitForResource(function check(resource){
res = resource;
return resource.url.indexOf(".json") != -1;
}, function then(){
resData = casper.evaluate(function(url){
// synchronous GET request
return __utils__.sendAJAX(url, "GET");
}, res.url);
// do something with the data here or in a later step
});
casper.run();
Stateful AJAX Request
If it is not stateless, you would need to replace the implementation of XMLHttpRequest. You will need to inject your own implementation of the onreadystatechange handler, collect the information in the page window object and later collect it in another evaluate call.
You may want to look at the XHR faker in sinon.js or use the following complete proxy for XMLHttpRequest (I modeled it after method 3 from How can I create a XMLHttpRequest wrapper/proxy?):
function replaceXHR(){
(function(window, debug){
function args(a){
var s = "";
for(var i = 0; i < a.length; i++) {
s += "\t\n[" + i + "] => " + a[i];
}
return s;
}
var _XMLHttpRequest = window.XMLHttpRequest;
window.XMLHttpRequest = function() {
this.xhr = new _XMLHttpRequest();
}
// proxy ALL methods/properties
var methods = [
"open",
"abort",
"setRequestHeader",
"send",
"addEventListener",
"removeEventListener",
"getResponseHeader",
"getAllResponseHeaders",
"dispatchEvent",
"overrideMimeType"
];
methods.forEach(function(method){
window.XMLHttpRequest.prototype[method] = function() {
if (debug) console.log("ARGUMENTS", method, args(arguments));
if (method == "open") {
this._url = arguments[1];
}
return this.xhr[method].apply(this.xhr, arguments);
}
});
// proxy change event handler
Object.defineProperty(window.XMLHttpRequest.prototype, "onreadystatechange", {
get: function(){
// this will probably never called
return this.xhr.onreadystatechange;
},
set: function(onreadystatechange){
var that = this.xhr;
var realThis = this;
that.onreadystatechange = function(){
// request is fully loaded
if (that.readyState == 4) {
if (debug) console.log("RESPONSE RECEIVED:", typeof that.responseText == "string" ? that.responseText.length : "none");
// there is a response and filter execution based on url
if (that.responseText && realThis._url.indexOf("whatever") != -1) {
window.myAwesomeResponse = that.responseText;
}
}
onreadystatechange.call(that);
};
}
});
var otherscalars = [
"onabort",
"onerror",
"onload",
"onloadstart",
"onloadend",
"onprogress",
"readyState",
"responseText",
"responseType",
"responseXML",
"status",
"statusText",
"upload",
"withCredentials",
"DONE",
"UNSENT",
"HEADERS_RECEIVED",
"LOADING",
"OPENED"
];
otherscalars.forEach(function(scalar){
Object.defineProperty(window.XMLHttpRequest.prototype, scalar, {
get: function(){
return this.xhr[scalar];
},
set: function(obj){
this.xhr[scalar] = obj;
}
});
});
})(window, false);
}
If you want to capture the AJAX calls from the very beginning, you need to add this to one of the first event handlers
casper.on("page.initialized", function(resource){
this.evaluate(replaceXHR);
});
or evaluate(replaceXHR) when you need it.
The control flow would look like this:
function replaceXHR(){ /* from above*/ }
casper.start(yourUrl, function(){
this.evaluate(replaceXHR);
});
function getAwesomeResponse(){
return this.evaluate(function(){
return window.myAwesomeResponse;
});
}
// stops waiting if window.myAwesomeResponse is something that evaluates to true
casper.waitFor(getAwesomeResponse, function then(){
var data = JSON.parse(getAwesomeResponse());
// Do something with data
});
casper.run();
As described above, I create a proxy for XMLHttpRequest so that every time it is used on the page, I can do something with it. The page that you scrape uses the xhr.onreadystatechange callback to receive data. The proxying is done by defining a specific setter function which writes the received data to window.myAwesomeResponse in the page context. The only thing you need to do is retrieving this text.
JSONP Request
Writing a proxy for JSONP is even easier, if you know the prefix (the function to call with the loaded JSON e.g. insert({"data":["Some", "JSON", "here"],"id":"asdasda")). You can overwrite insert in the page context
after the page is loaded
casper.start(url).then(function(){
this.evaluate(function(){
var oldInsert = insert;
insert = function(json){
window.myAwesomeResponse = json;
oldInsert.apply(window, arguments);
};
});
}).waitFor(getAwesomeResponse, function then(){
var data = JSON.parse(getAwesomeResponse());
// Do something with data
}).run();
or before the request is received (if the function is registered just before the request is invoked)
casper.on("resource.requested", function(resource){
// filter on the correct call
if (resource.url.indexOf(".jsonp") != -1) {
this.evaluate(function(){
var oldInsert = insert;
insert = function(json){
window.myAwesomeResponse = json;
oldInsert.apply(window, arguments);
};
});
}
}).run();
casper.start(url).waitFor(getAwesomeResponse, function then(){
var data = JSON.parse(getAwesomeResponse());
// Do something with data
}).run();
I may be late into the party, but the answer may help someone like me who would fall into this problem later in future.
I had to start with PhantomJS, then moved to CasperJS but finally settled with SlimerJS. Slimer is based on Phantom, is compatible with Casper, and can send you back the response body using the same onResponseReceived method, in "response.body" part.
Reference: https://docs.slimerjs.org/current/api/webpage.html#webpage-onresourcereceived
#Artjom's answer's doesn't work for me in the recent Chrome and CasperJS versions.
Based on #Artjom's answer and based on gilly3's answer on how to replace XMLHttpRequest, I have composed a new solution that should work in most/all versions of the different browsers. Works for me.
SlimerJS cannot work on newer version of FireFox, therefore no good for me.
Here is the the generic code to add a listner to load of XHR (not dependent on CasperJS):
var addXHRListener = function (XHROnStateChange) {
var XHROnLoad = function () {
if (this.readyState == 4) {
XHROnStateChange(this)
}
}
var open_original = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (method, url, async, unk1, unk2) {
this.requestUrl = url
open_original.apply(this, arguments);
};
var xhrSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function () {
var xhr = this;
if (xhr.addEventListener) {
xhr.removeEventListener("readystatechange", XHROnLoad);
xhr.addEventListener("readystatechange", XHROnLoad, false);
} else {
function readyStateChange() {
if (handler) {
if (handler.handleEvent) {
handler.handleEvent.apply(xhr, arguments);
} else {
handler.apply(xhr, arguments);
}
}
XHROnLoad.apply(xhr, arguments);
setReadyStateChange();
}
function setReadyStateChange() {
setTimeout(function () {
if (xhr.onreadystatechange != readyStateChange) {
handler = xhr.onreadystatechange;
xhr.onreadystatechange = readyStateChange;
}
}, 1);
}
var handler;
setReadyStateChange();
}
xhrSend.apply(xhr, arguments);
};
}
Here is CasperJS code to emit a custom event on load of XHR:
casper.on("page.initialized", function (resource) {
var emitXHRLoad = function (xhr) {
window.callPhantom({eventName: 'xhr.load', eventData: xhr})
}
this.evaluate(addXHRListener, emitXHRLoad);
});
casper.on('remote.callback', function (data) {
casper.emit(data.eventName, data.eventData)
});
Here is a code to listen to "xhr.load" event and get the XHR response body:
casper.on('xhr.load', function (xhr) {
console.log('xhr load', xhr.requestUrl)
console.log('xhr load', xhr.responseText)
});
Additionally, you can also directly download the content and manipulate it later.
Here is the example of the script I am using to retrieve a JSON and save it locally :
var casper = require('casper').create({
pageSettings: {
webSecurityEnabled: false
}
});
var url = 'https://twitter.com/users/username_available?username=whatever';
casper.start('about:blank', function() {
this.download(url, "hop.json");
});
casper.run(function() {
this.echo('Done.').exit();
});

Nodejs async versus sync method load test

I have been trying to create a view module for an MVC framework.
I have 2 versions of code. One that does Sync and one Async.
I know that i should be using the Async version. However whenever I do a loadtest via AB I'm getting better results from the Sync version.
Am I doing something wrong? This is a sample of the code I'm testing
Sync Version:
var fs = require('fs'),
path = require('path'),
dot = require('dot');
Step = require('../libraries/step.js');
var view = function(){};
view.prototype = {
renderView : function(source, data, layout, callback)
{
var self = this;
if (typeof callback !== 'function') throw ViewCallbackException;
layout = layout ? layout : 'default';
(function(sources, datas, layouts, callbacks)
{
content = fs.readFileSync('./views/layouts/' + layouts + '/index.html', 'utf-8');
callbacks(null, content);
})(source, data, layout, callback);
}
}
Async Version:
var fs = require('fs'),
path = require('path'),
dot = require('dot');
Step = require('../libraries/step.js');
var view = function(){};
view.prototype = {
renderView : function(source, data, layout, callback)
{
var self = this;
if (typeof callback !== 'function') throw ViewCallbackException;
layout = layout ? layout : 'default';
(function(sources, datas, layouts, callbacks)
{
Step(
function()
{
fs.readFile('./views/layouts/' + layouts + '/index.html', 'utf-8', this);
},
callbacks
);
})(source, data, layout, callback);
}
}

calling inner function of plugin

Here is my plugin
(function($){
$.fn.myPlugin = function(options){
var defaults = {
width: 800
};
var defaults = $.extend(defaults, options);
var self = this;
function init(obj){
/*Initialize object*/
self.myPlugin.doAnimation(600,400);
}
$.fn.myPlugin.doAnimation = function(lV, rV){
/*Doing some animation work*/
}
return this.each(function(options){
init(this);
});
}
})(jQuery);
I am trying like this
var t = $('#id1').myPlugin();
t.doAnimation(); //getting error here, t.doAnimation is not a function
You can't. You're not returning the plugin. You're returning the jQuery object with the matched element(s) (like you probably should). The testing function is private to the myPlugin function anyway.
To call a method against a jQuery object, you would need to extend jQuery like you did for your myPlugin(), as in:
function($){
$.fn.myPlugin = function(options) {
...
}
$.fn.testing = function(options) {
...
}
})(jQuery);
Of course this would be completely separate from the original plugin.
I don't know what your plugin does, but if you need to share some data between plugins on a per-element basis, you could probably use jQuery's .data() method.

Resources