Losing context with parse.com javascript SDK - javascript

So the goal of what I'm doing it to store an array of objects inside an object literal for later reference. I am losing context(if that is the right terminology to use here) in a place that is confusing for me. Here is the code:
HuntObject = {
// Data.hunts gives collection
Data: {},
fetchCollec: function(){
var self = this;
var huntObj = new Parse.Query(huntObject);
huntObj.find({
success: function(results){
var hunts = [];
for(i in results){
hunts.push(i);
}
console.log(self);
//Here self references HuntObject
self.Data = hunts;
},
error: function(e){
console.log(e.message);
}
});
console.log(self);// Here self references HuntObject
console.log(self.Data); // empty
So in both my console.log statements the correct context that I want is referenced and in the last log call to self I can even see in the console that the Data object now has an array of objects in it. But than as soon as I try to reference that array I get an empty Object. I tried assigning the array in different ways like self.Data.array = hunts. I also tried to set up Data as a method like this.
Data: (function(){
return {
array: []
}
}());
I think maybe my understanding of how context changes in different situations is pretty weak so It would be nice to solve my original goal but more important I would like to understand context better and why my implementation is failing in this instance?

This isn't a scope or context issue, you're handling that with your self variable.
My guess is that Parse.Query is asynchronous. And so you'd have to do your console.log within the success function; doing it in the code immediately after the call to Parse.Query calls it too soon (before the query completes).
So:
huntObj.find({
success: function (results) {
var hunts = [];
for (i in results) {
hunts.push(i);
}
console.log(self);
//Here self references HuntObject
self.Data = hunts;
// *********** Move these here
console.log(self); // Here self references HuntObje
console.log(self.Data); // Not empty anymore
},
error: function (e) {
console.log(e.message);
}
});
// Any code here runs after you've *started* the query, but
// before it *completes*

Related

best way to handle callback initialization and functions that hold data between function calls

I have this code that is called in an ajax callback once the data is fetched:
function onFetchCallback(data) {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
I dont find this clean, bacause I am checking if the arrays that accumulate the data are initialized for every callback call. I think it woull be better to have the callback function initialized, so that the arrays are created, and then call the functions that will store the data in the arrays.
So I did:
function onFetchCallback() {
function init() {
onFetchCallback.accumData ??= [];
onFetchCallback.timeLine ??= [];
onFetchCallback.tempValues1 ??= [];
onFetchCallback.tempValues2 ??= [];
onFetchCallback.char;
}
function store(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
//push values into different arrays
} else {
//push the rest of no nulls if there is any...
}
}
onFetchCallback.init = init;
onFetchCallback.store = store;
}
So then when I need to use my callback I do:
onFetchCallback();
onFetchCallback.init();
myWhateverFunc(onFetchCallback.store);
Being myWhateverFunc the one calling the callback:
function myWhateverFunc(callback) {
$.ajax({
//whatever
})
.done(function (data) {
callback(data); //CALL
});
}
This works and I find it super javasScriptic so I do it all the time. Meaning the onFetchCallback initialization + other methods call to handle the function members. I do not know js in depth so I would like to know of there are any flaws with this pattern, or if there is any other better/cooler/javaScriptStylish way to do this.
The pattern you're using has a lot of resemblence with the function constructor which is more commonly used in JavaScript.
An implementation of your code in the function constructor pattern would like like this:
function FetchCallback() {
this.accumData = [];
this.timeLine = [];
this.tempValues1 = [];
this.tempValues2 = [];
this.char;
}
FetchCallback.prototype.store = function(data) {
const hasNulls = data.includes(null);
if (!hasNulls) {
// push values into different arrays
} else {
// push the rest of no nulls if there is any...
}
};
It enables you to create an object with properties and methods which are predefined. This removes the hassle of repetition when you need multiple instances of this same object.
To use the constructor you'll need to create a new instance with the new keyword. This will return an object with all the properties and methods set.
const fetchCallback = new FetchCallback();
// Note the .bind() method!
myWhateverFunc(fetchCallback.store.bind(fetchCallback));
Edit
You'll need to specifically set the value of this to the created instance that is stored in fetchCallback. You can do this with the bind() method. This methods explicitly tells that this should refer to a specific object.
The reason to do this is that whenever you pass the store method as the callback to the myWhateverFunc, it loses it's context with the FetchCallback function. You can read more about this in this post
The main difference between this and your code is that here the FetchCallback function will be unaltered, where your function is reassigned every time you call onFetchCallback() and onFetchCallback.init(). The constructor pattern will result in more predictable behavior, albeit that the this keyword has a learning curve.

Nested functions have no access to requirejs callback parameters

While migrating to requirejs I have run into a problem that I cannot seem to find the answer to.
The problem is that my nested functions do not have access to the parameters passed to the requirejs callback.
for example:
define(['knockout', 'knockoutmapping', 'other'], function(ko, mapping, other) {
var Something = function() {
var self = this;
self.items = ko.observableArray([]);
self.doSomeStuff = function(data) {
// I would think I would still be able to access
// parameters ko, mapping and other
// trouble is, I cannot. I only have
// a valid 1st parameter, "ko".
var d = ko.toJSON(self.items()); // this works fine
self.items(mapping.fromJS(data));// this does not work (undefined)
// do not have access to "other" either.
};
};
return {
Something: Something,
};
});
Any help with this would be appreciated. I know I could put these into variables in the callback, but that doesn't seem like the correct approach to me.
Thank you in advance.
in define, callback is first argument and it have one parameteter require function, try:
define(function(require) {
var knockout = require('knockout');
var knockoutmapping = require('knockoutmapping');
var other = require('./other');
var Something = function() {
...
};
return {
Something: Something,
};
});

in callback this refers to window instead of my object [duplicate]

The problem I am having is specifically with D3.js, but I've had similar problems before and always ended up using a hack to get around it.
I have a class which contains an array of objects. There is a function to add new objects from a CSV file. using d3.csv. This function takes a filename and a callback function with one argument (the current parsed line of the csv file). I want to append each parsed line to this.objects, but this is no longer within the scope of the function.
function MyClass(){
this.objects = [];
this.add_objects = function(filename){
d3.csv(filename, function(data){
//Callback fired for each parsed line in csv file
//Now I want to push data to this.objects...
}
}
}
A common way to do this in javascript is with a closure variable in the parent scope:
function MyClass(){
var self = this;
this.objects = [];
this.add_objects = function(filename){
d3.csv(filename, function(data){
//Callback fired for each parsed line in csv file
// you can access self here
self.objects.push(xxx);
});
}
}
or that variable could be more specific:
function MyClass(){
this.objects = [];
var objectArray = this.objects;
this.add_objects = function(filename){
d3.csv(filename, function(data){
//Callback fired for each parsed line in csv file
// you can access objectArray here
objectArray.push(xxx);
});
}
}
or, you can use .bind() (if you don't need to support older IE like IE8) to create a wrapper that will force the setting of this for your callback:
function MyClass(){
this.objects = [];
this.add_objects = function(filename){
d3.csv(filename, function(data){
//Callback fired for each parsed line in csv file
this.objects.push(xxx);
}.bind(this));
}
}
Another approach (but more complicated) is to use bind:
function MyClass(){
this.objects = [];
function handler(data) {
// here this is your binded this.
}
this.add_objects = function(filename){
d3.csv(filename, handler.bind(this));
}
}

KnockoutJS - update object with internal function

I am having an "this" issue and would appreciate any help
this is my basic code
function xxx(val)
{
this.x = val;
this.change = function() {
var self = this;
$.ajax({
blah: '',
blah: '',
success: function(data) { self.x = 5; },
});
};
}
var newX = new x(1);
newX.change();
console.log(newX.x);
Hopefully that makes sense,
What I am trying to do is update the original object on the jquery ajax response. I do not have access to 'this' so i tried to pass it off to the 'self' variable but the object values does not seem to be updating even though the code is running as expected.
I am sure there is a simple answer, i just dont know it.
Any help is greatly appreciated.
So the way to resolve this is take a look at your function declarations. Each function declaration will give you a new this object. Store the one you are interested in the correct spot. If I'm correct, it looks like you actually want to access the scope of the original xxx function scope. So instead of storing this in the change function, store it above that in the original scope. Something like this:
function xxx(val)
{
var self = this;
this.x = val;
this.change = function() {
var that = this;
$.ajax({
blah: '',
blah: '',
success: function(data) { self.x = 5; },
});
};
}
var newX = new x(1);
newX.change();
console.log(newX.x);
The other issue here is that you are using AJAX to make that call so you either need a Deferred object or you could add a callback to that function that gets triggered at the right time like so:
function xxx(val)
{
var self = this;
this.x = val;
this.change = function(callback) {
var that = this;
$.ajax({
blah: '',
blah: '',
success: function(data) {
self.x = 5;
if (typeof callback === "function"){
callback.call(this);
}
}
});
};
}
var newX = new xxx(1);
newX.change(function(){
console.log(newX.x);
});
In knockout... you'll have to do something like that:
function Xxx(val)
{
var self = this;
this.x = ko.observable(val);
this.change = function() {
// "that" may be different to "self" in some
// cases...
var that = this;
$.ajax({
url: '...',
type: 'get',
success: function(data) {
self.x(5);
},
error: function(a) {
console.log('got an error');
}
});
};
}
var newX = new Xxx(1);
newX.change();
ko.computed(function () {
// This will get called everytime
// newX.x is changed
console.log(newX.x());
});
When you create a variable, that may change, you have to create it as an observable. The observable is in fact a function that you call. When called, it will update its inner value and it will also trigger any changes wherever the observable is "observed"
In no way you should try to do this.x = 5. It will override the actual observable object and thus it will never trigger every observer of a change.
edit
In case you're interested to understand how does computed works. A computed variable is a function that will listen to observables. When the computed is created, it will be called once to check which observables where called from within it. It's a way to "track" dependencies. In this example, you should see at least two console log. one with 1, and then with 5.
In my case, the computed variable is kind of anonymous since it isn't affected anywhere. Also in some case, you may need to observe one variable but use multiple observables. To prevent update on any other used observables. There are some ways to do that. You can either return after you "watched" the observables you needed.
Or you can create a sub function that will be triggered a little after the computed with setTimeout(..., 0);. There are a couple of ways to achieve some really nice tricks.

Code Structure with ExtJS

I'm trying to organize my ExtJS javascript a little better. I've an ExtJS object like this:
Ext.define('QBase.controller.ControlModelConfigurationController', {
extend: 'Ext.app.Controller',
views: [
'ControlModelConfiguration'
],
init: function() {
console.log('Initialized ControlModelConfigurationController');
this.control({
'#testBtn': {
click: this.loadModel
}
});
},
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes,handleNode);
}
}
});
},
handleNode: function(items) {
console.log(item.name);
}
});
The posted code above is not working. Ext.Array.forEach(nodes,handleNode) causes trouble. Instead of using an anonymous function like :
...
Ext.Array.forEach(nodes,function(item) {
console.log(item)});
}
...
I'd like to extract the anonymous function as a named external one. Unfortunately I'm unable to figure out the right syntax to establish a code structure as shown above.
Meanwhile, I figured out, that putting
function handleNode(item) {
{console.log(item)}
}
at the very end of the file works. Is it possible to make the handleNode method an object - "member" of the controller?
Thanks in advance
Chris
handleNode is a member of the containing object. When loadModel is called, this contains the right object, but at the time the callback is invoked, it will not point to the one we are interested in. You can save this to the local variable self, and use it instead.
loadModel: function() {
var self = this
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response)
{
if (success)
{
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml,parent);
Ext.Array.forEach(nodes, self.handleNode);
}
}
});
},
The solution posted by vhallac is not entirely correct. It assumes that handleNode doesn't reference the current object through this variable. Maybe just a typo, but additionally it's not really the ExtJS way...
Whenever ExtJS provides a callback parameter, there is nearly always a scope parameter to set the value of this within the callback function.
loadModel: function() {
console.log('Load Model....');
var conn = new Ext.data.Connection;
conn.request({
url: 'partsV10.xml',
callback: function(options, success, response) {
if (success) {
alert("AHHH");
var dq = Ext.DomQuery;
var xml = response.responseXML;
var nodes = dq.select('part', xml, parent);
Ext.Array.forEach(nodes, this.handleNode, this);
}
},
scope: this
});
},
handleNode: function(node) {
// From within here you might want to call some other method.
// Won't work if you leave out the scope parameter of forEach.
this.subroutine();
}
Just like forEach uses a scope parameter, the request method uses a scope config option. This is ExtJS convention for passing around the scope. You can alternatively create an extra local variable and reference the scope from there, but in the context of ExtJS this style will feel awkward, plus (I'm pretty sure) it's a lot more bug-prone.

Categories