I am checking a this.hash property onClick of tab but onload hash doesn't exist, Can I add hash property onLoad to let this condition pass through?
So self.$("first").ready(renderPage) is called onLoad and I am trying to add this.hash to it so it passes the condition in renderPage().
render : function () {
self = this;
renderPage = function () {
console.log("this.hash : " + this.hash);
if (this.hash) { // this.hash is only present when tab is clicked onLoad its undefined
//do some stuff
getTabClicked(this.hash);
}
buildString();
ajaxData.callAPI(function (data) {
// process data and render output;
});
}
onloadCall = function () {
$(self.el).html(self.template());
self.$(tab).html(self.templateFlyout());
self.$("#allTabs").tabs().addClass("xyz");
self.$("#first").tabs();
self.$("#second").tabs();
//this.hash = "first"; // but it gives error this is undefined.
self.$("first").ready(renderPage); // I want to add this.hash before this call
self.$("[id^=tabs-]").click(renderPage);
onMenuChange();
},
readJson = function () {
$.getJSON("./js/data/myJson.json", function (data) {
jsonData = data;
onloadCall();
});
};
readJson();
return this;
}
Yes, easily.
this.newProperty = value;
// Or
this[newProperty] = value;
this is defined by the context of the current function. If you want to access the same definition of this outside the function it's used in, you have to know what that definition is. In your case, it looks like the definition is document, given that you say the context is [#Object HTMLDocument]. So, to add a hash property to that version of this is simple:
// instead of
this.hash = "first";
// use
document.hash = "first";
Related
What am I doing wrong, and how can one pass variables to a different function within the same wrapping variable/function.
Example:
function customFunctionWrap(){
this.myVar1 = 0;
this.getCurrentPosition = function(){
if (navigation.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){});
}
},
this.doSomething = function(){ // Works
//Do something, return
this.callWithParams(); //Works
},
//If I remove passing in 'value1',calling it elsewhere works
this.doSomethingWithParams = function(value1){
//Use value1
//Return
},
this.callWithParams = function(){
var value1 = 'xyz'; //Is a variable that changes based on some DOM element values and is a dynamic DOM element
this.doSomethingWithParams(value1); //THROWS TYPEDEF ERROR: this.doSomethingWithParams is not a function
this.getCurrentPosition();
}
};
var local = new customFunctionWrap();
local.doSomething(); //WORKS
I know there is another way to do it and then directly use customFunctionWrap.callWithParams(), but am trying to understand why the former approach is erroring out.
var customFunctionWrap = {
myVar1 : 0,
callWithParams : function(){
}
}
What JS sees:
var customFunctionWrap = (some function)()
returned function is fired, because the last (), so it has to yield/return something, otherwise, like in your code it is "returning" undefined.
So your given code does not work.
The very first fix is to delete last 2 characters from
var customFunctionWrap = (some function)()
to make it return constructor.
i've node app and I've created a module/file to restore some global value via event that update the value and return it, when I use it I always get false even the event was called,How I can do it right ?
I want it to behave like getter property,
global.js file
var inter = require("../pl/intr");
var isAvailable;
inter.eventEmitter.on('AppAvailable', function () {
console.log("---events is raised--");
isAvailable = true;
});
module.exports = {
isAvailable:isAppAvailable
}
I checked the event and the console.log was called...
Does this do what you need?
var inter = require("../pl/intr");
module.exports = {isAvaiable:false};
inter.eventEmitter.on('AppAvailable', function () {
console.log("---events is raised--");
module.exports.isAvailable = true;
});
I've an object called 'sheet1'
var nr = 1;
function Sheet(title){
this.div = document.createElement('div');
this.div.dataset.sheetNr = nr;
this.div.dataset.sheetTitle = title;
document.getElementById("sheets").appendChild(this.div);
nr++;
}
Sheet.prototype = {
constructor: Sheet,
get : function(data){
return this.div.dataset.data;
}
}
var sheet1 = new Sheet("Title1");
now when I call the function
sheet1.get("sheetNr");
it returns 'undefined' !...how can I solve this problem?
// console.log(data); outputs sheetNr
but when I change my function like
Sheet.prototype = {
constructor: Sheet,
get : function(){
return this.div.dataset.sheetNr;
}
}
and then call
sheet1.get();
it returns the number of the sheet...1 in this case...
http://codepen.io/anon/pen/rOXZjq?editors=101
You don't have a data attribute defined on the div you are creating sot it doesn't exist as called. When you call this.div.dataset.sheetNr you are actually hitting a defined attribute. To use the variable data as an index you need to call:
this.div.dataset[data] instead.
Trying to do something that in pseudo code would look like this:
(function(scope) {
scope.doSomenthin = function() {
if (x === y && this.onfinish) {
// If exists, run onfinish, should return 'fin'
this.onfinish();
}
}
})(scope);
window.scope = window.scope || (window.scope = {});
scope.doSomenthin().onfinish = function(){return 'fin'}
At run time if onfinish exists, run that function. Tried using getters/setter but at that point it will return undefined. Setting a timeout works but its not something I wish to do.
Any other ideas? Thanks.
I'm not sure if I completely understand the question, but I think what you want comes down to setting the context for the functions you are calling. Is this what you are after?
//create a function that accesses an object's properties and methods with 'this'
var doSomethin = function() {
var result = "nonfinish";
if (this.onfinish) {
// If exists, run onfinish, should return 'fin'
result = this.onfinish();
}
return result;
}
//add an 'onfinish' method to the 'scope' object
scope = {
onfinish: function(){return 'fin'}
}
//run the accessor function in the window context
alert(doSomethin());
//run the accessor function in scope's context
alert(doSomethin.call(scope));
I see several mistakes with your code. This may be the results you are trying to achieve..
window.scope = window.scope || (window.scope = {});
scope.onfinish = function(){return 'fin'};
(function(scope) {
scope.doSomenthin = function() {
if (this.onfinish) {
// If exists, run onfinish, should return 'fin'
return this.onfinish();
}
}
})(scope);
alert(scope.doSomenthin());
When you create the temporary scope here you give scope as a
parameter. But scope is not defined yet.
(function(scope) {
scope.doSomenthin = function() {
if (x === y && this.onfinish) {
// If exists, run onfinish, should return 'fin'
this.onfinish();
}
}
})(scope);
Your scope.doSomenthin function doesn't return any value. Because
of that the value of scope.doSomenthin() is undifined. Therefore
with scope.doSomenthin().onfinish = function(){return 'fin'} you
are trying to set a property of undifined.
What you want to approach is similar to event-driven programming. Don't just call the function right away, register it as an event handler instead. The following pseudo-code only shows my idea. It's not complete
//register the function here, instead of calling it immediately
event = document.createEvent("HTMLEvents");
event.initEvent("myEvent", true, true);
document.addEventListener("myEvent", function(e) {
e.scope.doSomenthin = function() {
if (this.onfinish) {
// If exists, run onfinish, should return 'fin'
return this.onfinish();
}
}
});
......
//call the handler to handle the below event
window.scope = window.scope || (window.scope = {});
scope.doSomenthin().onfinish = function(){return 'fin'}
event.scope = scope;
document.body.dispatchEvent(event);
The above code is kind of silly. You have to design where to put and trigger the events.
I have the following code:
function Show() {
this.showId = $("#meta-show-id").val();
this.title = $("#meta-title").val();
this.season = $("#meta-season").val();
this.episode = $("#meta-episode").val();
this.storageId = $("#meta-show-id").val() + '-' + $("#meta-season").val() + '-' + $("#meta-episode").val();
this.torrents = [];
this.putioId = null;
this.status = null;
this.subtitle = null;
}
Show.prototype = {
constructor: Show,
checkStorage: function() {
var storage = new Storage();
storage.get(this.storageId, function(data){
if (jQuery.isEmptyObject(data)){
console.log("empty");
}
else {
this.subtitle = data.subtitle;
}
});
}
}
When I call the checkStorage() method on object, method checks in chrome.storage.sync for data, and sets object this.subtitle property.
But this doesn't seem to work, this.subtitle value doesn't change.
What am I doing wrong?
This is a normal result, and it happens because of scope changing. I don't know if Storage is has your own implementation (because it is used with getItem instead of get), but anyways, you are calling a method that I guess calls back the function you provide as a second argument, right?
And because this function is called from somewhere else, this is not the object that you want.
Here is a simple example: http://jsfiddle.net/6c2e6/1/
Check out logs, and see what this is. It's the Window, because my test function is at top level..