I'm passing down some JSON data from Smarty. I'm applying this to a JavaScript variable, options.
If you've seen my previous question about date formats you'll know I need to do a bit of work on the data coming in, so I've got a function called chart_convert_dates() that's called, passing in the options (well, options.data), and upon it's return setting it back again.
If you read through my code you'll notice I'm debugging the options variable, and it changes from the original before the function is called!?
If I comment out the function call, the variable is untouched, as it should be at that point.
This happens with Chrome, FF... what's going on?
{literal}
<script type="text/javascript">
$(document).ready(function() {
// set JS var, this data is coming in from smarty
var options = {/literal}{$options}{literal};
// these should both be exactly the same
debug.debug({/literal}{$options}{literal});
debug.debug(options);
// but the above outputs aren't the same! options has been modified
// by the function below... that hasn't even fired yet!? We can prove
// this by commenting out the following function call
options.data = chart_convert_dates(options.data);
// ... do something else
});
</script>
{/literal}
This is, of course, impossible.
You'll probably find that the debug.debug() function is saving a reference to the object it is provided with, rather than converting it to a string immediately. When you then view the contents of it's argument at a later time, the output will reflect the current state of the object, rather than the state it was in.
This is best explained with the following example:
var debug = {
report: function () {
// console.log(this._value);
},
debug: function (arg) {
this._value = arg; // save a reference
}
}
var options = {
foo: 1
};
debug.debug(options);
options.foo = 2;
debug.report(); // will show 2 (http://jsfiddle.net/zQFPm/)
http://jsfiddle.net/zQFPm/
Related
I've been trying to understand async, promises, etc. and I think I have a basic understanding of it, but I'm not getting the results I expect.
I have a HTML table, with the following:
<table data-bind="visible: viewPrincipal()">
viewPrincipal() is a function that should return true or false. This does work at the most basic level if viewPrincipal() just consists of return false or return true. But what I'm trying to do is call an async function to get the true or false value from there.
function viewPrincipal() {
console.log("Seeing if person is in principal group");
return IsCurrentUserMemberOfGroup("Principal Members", function (isCurrentUserInGroup) {
console.log(isCurrentUserInGroup);
return isCurrentUserInGroup;
});
}
The console.log works, and returns a true or false as I'd expect it to. But I want the parent viewPrincipal() function to return that true or false value, and all I get is "undefined".
I understand why this is happening - the IsCurrentUserMemberOfGroup() function is taking a bit of time to complete - but I don't know how to fix it. I know how to chain functions together, but when I'm trying to use something like knockout.js to determine if a table should be visible or not, I don't know how to chain.
Can anyone help?
The best way is to use an observable bool, and let your a-sync function change it's value. Let the magic of two-way-bindings do the rest.
Example:JSFIDDLE
function vm() {
this.viewPrincipal = ko.observable(false);
};
var vm = new vm();
ko.applyBindings(vm);
function fakeAsync() {
setTimeout(() => {
vm.viewPrincipal(true);
}, 1500);
}
fakeAsync();
I am a bit lost with your approach, but I'll try to help.
First, please double-think whether you really want to implement access control on the client side. Simply hiding an element if the user does not have sufficient rights is pretty dangerous, since the (possibly) sensitive content is still there in the DOM, it is still downloaded, all you do like this is not displaying it. Even a newbie hacker would find a way to display it though - if nothing else he can simply view it using the F12 tools.
Second, is that triple embedding of functions really necessary? You have an outermost function, that calls a function, which, in turn, calls the provided callback. You could clear this up by using computed observables:
function viewModel() {
var self = this;
var serverData = ko.observable(null);
this.viewPrincipal = ko.computed(function() {
var srvDataUnwrapped = serverData(); // access the inner value
if (!srvDataUnwrapped) {
return false;
}
// Do your decision logic here...
// return false by default
return false;
});
// Load the permission details from the server, this will set
// a variable that the viewPrincipal depends on, this will allow
// Knockout to use its dependency tracking magic and listen for changes.
(function() {
$.ajax(url, {
// other config
success: function (data) {
serverData(data);
}
);
})();
};
var vm = new viewModel();
and then in your view:
<table data-bind="visible: viewPrincipal">
note the lack if ()'s here, it is an observable, so Knockout will know how to use it.
If this seems overly complicated to add to your already existing code, then you could simply define an observable instead, and set the value of that inside your callback:
function viewModel() {
// other stuff ...
this.viewPrincipal = ko.observable(false);
// Call this wherever it fits your requirements, perhaps in an init function.
function checkPrincipal() {
IsCurrentUserMemberOfGroup("Principal Members", function (isCurrentUserInGroup) {
viewPrincipal(isCurrentUserInGroup);
});
};
};
With this approach, the markup would be the same as in the previous one, that is, without the parentheses:
<table data-bind="visible: viewPrincipal">
Doing it this way will simply set the inner value of an observable inside the callback you pass to IsCurrentUserMemberOfGroup, and because Knockout is able to track changes of observables, the value change will be reflected in the UI.
Hope that helps.
Can someone please explain why the function not getting the value of the object in the first way?
I got the Backbone.View:
var some.view = Backbone.View.extend({
elements = {},
//...
//some init, filling up elements...
//...
stopTask: function() {
// Calling the function with parameters explained later
stopThisTask(...);
}
});
And the function:
function stopThisTask(task){
console.log(task);
}
When I call stopThisTask in the following way, the task parameter is undefined
stopThisTask(this.elements);
However, when I do it like this, the task has the value
var tmp = this.elements;
stopThisTask(tmp);
Can someone please explain why is that?
If I know right the variables are passed by value, and the obects are passed by references. However, does that mean in some way I loose the reference for the elements object?
I'm suspecting that the this.elements gets resolved inside the stopThisTask function, so this will point to stopThisTask instead of to the caller of stopThisTask.
By explicitly setting the tmp parameter in the caller, you guarantee the correct this scope is used.
Should be equivalent to
stopThisTask.call(this, this.elements);
While this issue occurred to me specifically with KnockoutJS, my question is more like a general javascript question.
It is good to understand however that ko.observable() and ko.observableArray() return a method so when assigning a value to them, you need to call the target as method instead of simply assigning a value to them. The code that I'm working with should also support plain objects and arrays, which I why I need to resolve to a method to call to assign a value to the target.
Think of these 2 examples:
Non-working one (this context changed in called method):
// Assigning value to the target object
var target;
// target can be of any of thr following types
target = ko.observableArray(); // knockout observable array (function)
// target = ko.observable(); // knockout observable (function)
// target = {}; // generic object
// target = []; // generic array
//#region resolve method to call
var method;
if (isObservable(target)) {
// if it is a knockout observable array, we need to call the target's push method
// if it is a konckout observable, we need to call the target as a method
method = target.push || target;
} else {
// if target is a generic array, we need to use the array's push prototype
// if target is a generic object, we need to wrap a function to assign the value
method = target.push || function(item){ target = item; };
}
//#endregion
// call resolved method
method(entity);
Working one (this context is fine):
if (isObservable(target)) {
if (target.push) {
target.push(entity);
} else {
target(entity);
};
} else {
if (target.push) {
target.push(entity);
} else {
target = entity;
};
}
Now, to the actual question:
In the first approach, later in the execution chain when using a knockout observable knockout refers to this context within itself, trying to access the observable itself (namely this.t() in case someone is wondering). In this particular case due to the way of callin, this has changed to window object instead of pointing to the original observable.
In the latter case, knockout's this context is just normal.
Can any of you javascript gurus tell me how on earth my way of calling can change the 'this' context of the function being called?
Ok, I know someone wants a fiddle so here goes :)
Method 1 (Uncaught TypeError: Object [object global] has no method 'peek')
Method 2 (Works fine)
P.S. I'm not trying to fix the code, I'm trying to understand why my code changes the this context.
UPDATE:
Thanks for the quick answers! I must say I hate it when I don't know why (and especially how) something is happening. From your answers I fiddled up this quick fiddle to repro the situation and I think I got it now :)
// So having an object like Foo
function Foo() {
this.dirThis = function () {
console.dir(this);
};
};
// Instantiating a new Foo
var foo = new Foo();
// Foo.dirThis() has it's original context
foo.dirThis(); // First log in console (Foo)
// The calling code is in Window context
console.dir(this); // Second log in console (Window)
// Passing a reference to the target function from another context
// changes the target function's context
var anotherFoo = foo.dirThis;
// So, when being called through anotherFoo,
// Window object gets logged
// instead of Foo's original context
anotherFoo(); // 3rd log
// So, to elaborate, if I create a type AnotherFoo
function AnotherFoo(dirThis){
this.dirThis = dirThis;
}
// And and instantiate it
var newFoo = new AnotherFoo(foo.dirThis);
newFoo.dirThis(); // Should dir AnotherFoo (4th in log)
If you're after a way to choose the 'this' that will get used at the time of call,
you should use bind, that's exactly done for that.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
So if SomeObject has a push method, then storing it like this won't work :
var thePushMethod = someObject.push;
since you loose the context of the function when writing this.
Now if you do :
var thePushMethod = someObject.push.bind(someObject);
the context is now stored inside thePushMethod, that you just call with
thePushMethod();
Notice that you can bind also the arguments, so for instance you might write :
var pushOneLater = someObject.push.bind(someObject, 1 );
// then, later :
pushOneLater(); // will push one into someObject
Consider this example,
function Person () {
this.fname = "Welcome";
this.myFunc = function() {
return this.fname;
}
};
var a = new Person();
console.log(a.myFunc());
var b = a.myFunc;
console.log(b());
Output
Welcome
undefined
When you make a call to a.myFunc(), the current object (this) is set as a. So, the first example works fine.
But in the second case, var b = a.myFunc; you are getting only the reference to the function and when you are calling it, you are not invoking on any specific object, so the window object is assigned. Thats why it prints undefined.
To fix this problem, you can explicitly pass the this argument with call function, like this
console.log(b.call(a));
So, for your case, you might have to do this
method.call(target, entity);
Check the fixed fiddle
I am a newbie in backbone . I wanted to know when i do the following operation how i can get the model fetched values.
For example if i do something like following
this.model.fetch();
and i want to get a value for example
this.model.get("VALUE");
How i can make sure i get the right value which is fetched right now from the server. I am trying to do something like following but ofcourse this.model is not recognized inside the complete block.
this.model.fetch().complete(function(){
window.localStorage.setItem("VALUE", this.model.get("VALUE"));
});
I am stuck here. Does anybody have any ideas.
Well, I see two options: 1. just get rid of the complete block and use the functions separately.
this.model.fetch();
var value = this.model.get('value');
//or, if you want all of the values
// var values = this.model.toJSON();
// values.value -> the specific value
And I'm not very experienced with local storage, but why are you fetching a value and then setting it to local storage?
Or, 2. You could put your inner statements in a function, and bind it to the this:
initialize: function () {
_.bind('setItem', this);
},
setItem: function() {
// assuming this code works
window.localStorage.setItem("VALUE", this.model.get("VALUE"));
}
// elsewhere, and not familiar with complete, so I'm not certain how this works
this.model.fetch().complete(setItem);
I’ve got a JavaScript object built like this:
var Dashboard = {
form: {
action: function(){
return $('#upload_form').attr('action');
}(),
//snip (more functions)
}
}
If I call (using Chrome 17 on WinXP) Dashboard.form.action in the Chrome console after the page loaded (I checked the script and the function is there) the result is undefined but, if I then redefine Dashboard.form.action using the same function:
Dashboard.form.action = function(){
return $('#upload_form').attr('action');
}();
and subsequently call it, it works as expected!
What am I doing wrong? Is this a bug or am I just overthinking it?
Update:
Re your comment below:
actually what I want to do IS assigning the result to the action property...
In the question you said:
If I call...Dashboard.form.action...
which makes it seem like you're expecting action to be a function (you don't "call" non-functions).
If you're expecting it to be a string (the "action" attribute value from #upload_form), then you don't need to use a function at all. But you do need to be sure that you're doing it after the #upload_form element already exists in the DOM.
To do that, either put your script below it in the markup (anywhere below it is fine; just before or just after the closing </body> tag works well), or wrap your script in a ready call.
So your code becomes either this if it's after the #upload_form in the markup:
var Dashboard = {
form : {
action : $('#upload_form').attr('action'),
//snip (more functions)
}
};
...or this if you want to use ready (anything else using Dashboard will have to wait until ready as well):
jQuery(function($) {
var Dashboard = {
form : {
action : $('#upload_form').attr('action'),
//snip (more functions)
}
};
});
Note that in the second case, Dashboard will no longer be a global variable. That's a good thing, but if you need it to be global for some reason, you can export it:
jQuery(function($) {
var Dashboard = {
form : {
action : $('#upload_form').attr('action'),
//snip (more functions)
}
};
// Export the global
window.Dashboard = Dashboard;
});
Just make sure nothing tries to use Dashboard before ready has fired.
Original answer:
You have an extra pair of () on that:
action: function(){return $('#upload_form').attr('action');}()
// here -------^^
By putting them there, you call the function immediately, and assign the result of calling it to the action property. You just want to assign the function itself to the property, so don't put the () at the end to call it:
action: function(){return $('#upload_form').attr('action');}
This is for exactly the same reason you wouldn't use () here (let's assume you have a function called foo) if you want f to refer to foo:
var f = foo;
If you said
var f = foo();
...you'd be calling foo, not referring to it.