call methods in callback - javascript

I have this Try class:
function Try () {
console.log('Start')
this.Something( function() {
console.log('asd')
this.Some()
})
}
Try.prototype.Something = function (callback) {
console.log('hi all')
callback()
}
Try.prototype.Some = function () {
console.log('dsa')
}
But when I try to call the Some method in the callback part, it gives me an error, which says this.Some is not a function. What is the problem? How can i fix this?

scope of this is different inside a different function, even if it is inner function
you need to preserve this of outer function in self and make it
function Try () {
console.log('Start')
var self = this;
self.Something( function() {
console.log('asd')
self.Some();
})
}

Related

how to access to a function inside a funtion

I'm trying to call a function inside a function outside the main one:
var myFunction = function myFunct(element) {
function tryIt(){
alert("hello");
};
return{
tryIt: tryIt
}
}
And I'm try to call "tryIt" function outside myFunct with
myFunction.tryIt
But it doesnt work.
how can I do this?
First, you need is to call the function and then call the function of the returned object of the property tryIt.
var myFunction = function myFunct(element) {
function tryIt(){
alert("hello");
}
return {
tryIt: tryIt
};
};
myFunction().tryIt();
// ^^ calls myFunction
// ^^^^^^^^^ returns object with function tryIt
// ^^ calls tryIt
function myFunct() {
function tryIt() {
console.log("hi");
}
return {
tryIt: tryIt
};
}
var foo = myFunct();
foo.tryIt();

self-executing anonymous functions and call it again

I want to do something like this:
var build= (function(){
//my function body
})();
function test(){
//somthing then call build
build() //i want to call build function again in my code
}
How can I do this?
I tried this in angular:
var buildRoot = (() => {
$SubNode.get({
TypeID: vendorAdminService.NodeType.Category
}, function(data: vendorAdminService.IGetNodeParameters) {
$scope.ProductTree = data.TreeNodeModelItem;
$scope.AjaxLoading = false;
}, function(err) {
// alert(err)
})
})();
$mdDialog.show(confirm).then(function() {
$Category.Remove(node.ID)
buildRoot
}, function() {
});
but it does not work.
Anybody can guide me??
You need to return a function in your IIFE.
If you IIF is not trivial and has many functionalities you could also consider using Reveal Module Pattern.
var build = (function() {
var f = function() {
console.log('hello');
};
f();
return f;
})();
function test() {
build();
}
test();
Just use a named function.
Your IIFE needs to return a function, for later calling. But then is no need for an anonymous function.
function build() {
//my function body
}
or
var build = function () {
//my function body
};
var build = (function() {
var init = function() {
// magic code
};
return {
init: init
}
}());
function test() {
build.init()
}
test();
You include all your functionalities inside your build object, and you'll be able to call them as soon as you return them from inside that object. This effectively is called the revealing module pattern
For more information, read this
I see that there are missing semi-colons ";"
$mdDialog.show(confirm).then(function() {
$Category.Remove(node.ID);
buildRoot();
}, function() {
});

Ember.run.bind is not working

I am trying to get ember.run.bind to work but it just doesn't seem to work, any idea? I have tried all combinations
_didInsertElement: Ember.on('didInsertElement', function () {
Ember.run.bind(this, this.doSomething);
})
or
_didInsertElement: Ember.on('didInsertElement', function () {
Ember.run.bind(this, function() {
this.doSomething();
});
})
or
_didInsertElement: Ember.on('didInsertElement', function () {
var _this = this;
Ember.run.bind(this, function() {
_this.doSomething();
});
})
Ember.run.bind() returns a function that you can then call. It's meant for some asynchronous execution, so it doesn't expect to be called immediately, in the case of calling it immediately, it's unlikely you would need to use bind.
var func = Ember.run.bind(this, this.doSomething);
func();
http://emberjs.jsbin.com/diqelezika/edit?html,js,output

Using the original `this` in an event triggered outside

This would be better explained in code:
var FileResourceManager = {
LoadRequiredFiles: function (config) {
config = config || {};
this.OnLoading = config.onLoadingCallback;
this.OnComplete = config.onCompleteCallback;
//this works fine here.
if (this.OnLoading) {
this.OnLoading();
}
Modernizr.load([{
load: 'somefile.js',
complete: function () {
//Error in this callback here.
if (this.OnComplete) {
this.OnComplete();
}
}
});
}
};
FileResourceManager.LoadRequiredFiles({
onLoadingCallback: function () {
alert('started');
},
onCompleteCallback: function () {
alert('complete');
}
});
As you can see, in the callback for Modernizr.load's complete event, I want to call the method of the parent/outer object. But this actually became the Modernizr object. How can I access the properties of the outer object inside an event?
I've seen this done in the backbone.js project, by using some form of binding. I'm not sure if I need to write something like this.
var self = this;
Modernizr.load([{
load: 'somefile.js',
complete: function () {
//Error in this callback here.
if (self.OnComplete) {
self.OnComplete();
}
}
});
Modernizr.load([{
load: 'somefile.js',
complete: (function () {
//Error in this callback here.
if (this.OnComplete) {
this.OnComplete();
}).bind(this)
}
});
The this object redefined in the scope of the Modernizr function. It is customary to define a variable called that outside the scope and use it to refer to the outer this.
Alternatively, you could just use the config object, like this:
complete: function () {
if (config.OnComplete) {
config.OnComplete();
}
}

Variable Scope: this.remove is not a function

this.remove() is not a function. How come?
var vehicle = function () {
return {
init: function () {
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
this.remove();
});
},
remove: function () {
alert('test');
}
}
}();
jQuery().ready(vehicle.init);
Sorry for the confusion. I'm trying to call my own "remove" function. This is simply a class to manage vehicles on my page. This is the beginning of it and it will have a lot more functions than just init/remove.
this is a DOM element. To use jQuery's .remove() method, you need to wrap it in a jQuery object.
$(this).remove();
EDIT: If you were hoping to call the remove() function in the vehicle object, then call:
vehicle.remove();
Also, if you were hoping to shorten your .ready() call, you can do this:
jQuery(vehicle.init);
From the jQuery 1.4 release notes:
The jQuery().ready() technique still works in 1.4 but it has been deprecated. Please use either jQuery(document).ready() or jQuery(function(){}).
Maybe you're looking for something like this?
var vehicle = new function () {
var self = this;
this.init = function () {
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
self.remove();
});
};
this.remove = function () {
alert('test');
};
};
...or like this maybe? It's kind of hard to tell what you're going for...
var vehicle = new function () {
function remove () {
alert('test');
}
this.init = function () {
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
remove.call(this);
});
};
};
Note - we're all somewhat confused because it's not clear which "remove" function you want to call.
The problem is that you're passing in the reference to the "init" function, but when it's called the "this" variable will refer to the window object, not the value of "vehicle". Why? Because in Javascript the "this" value depends only on how a function is called. The fact that two functions are defined in the same object has absolutely nothing to do with it.
Try doing this instead:
jQuery(function() {
vehicle.init();
});
When you call the "init" function that way — by explicitly referencing it as a property of the "vehicle" object — then Javascript will bind "this" to the value of "vehicle".
edit oh wait I just noticed that you're also going to have to revise your "init" function, because that code inside the "click" handler is going to be called by jQuery in such a way as to bind "this" in that context to the affected element. Thus if you want to keep the "vehicle" reference around, you'd do this:
init: function () {
var originalThis = this;
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
originalThis.remove();
});
},
Since you said you're trying to call your own remove function, here's how to do it:
var vehicle = (function () {
return {
init: function () {
var that = this; // step one
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
that.remove();
});
},
remove: function () {
alert('test');
}
}
}()); // step zero - wrap the immediate invocation in parens
jQuery(function () {
vehicle.init(); // step two
);
var vehicle = function () {
return {
init: function () {
var self = this;
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
self.remove();
});
},
remove: function () {
alert('test');
}
}
}();
jQuery().ready(function() {
vehicle.init();
});
When invoking a function as a method "this" refers to the object that is invoking it. In jQuery the function passed is invoked as a method of the html element so "this" becomes the element.
To make sure you are refering to the correct object you'll need to create a reference to the original object.
var vehicle = function () {
var that = {
init: function () {
jQuery('.vehicle-year-profile .options .delete').bind('click', function (e) {
e.preventDefault();
that.remove();
});
},
remove: function () {
alert('test');
}
}
return that;
}();
jQuery().ready(vehicle.init);

Categories