Pass Component Name as Argument and then attach method (not working?) - javascript

Maybe I'm not using the right terms/names for my searches but I have not been able to find anything on this topic. I would have thought this would be an easy thing to find. What I'm doing is passing a component name to a function and then trying to use the component's name by attaching a method to it. I have confirmed (via Dev Tools) that the name is correctly being passed but when I use the variable and attach the method the specific request does not work. If I 'hard-code' the exact component name to the method it works perfectly. This makes me think the (various) ways I've been trying to attach the method to the variable name is incorrect (see various attempts below). Can you offer some direction here? Thank you.
Passing to Function ...
const grid_name = "grid_GroupA";
console.log(grid_name); // Shows grid_GroupA
msg_max(newItem, grid_name);
Function (only listing relevant parts)
function msg_max(newItem, grid_target) {
console.log(grid_target); // Shows grid_GroupA
// grid_GroupA.data.add(newItem); // This works ...
// grid_target.data.add(newItem); // This does not work
// (grid_target).data.add(newItem); // This does not work
// [grid_target].data.add(newItem); // This does not work
// grid_target + '.data.add(newItem)'; // This does not work
Thank you ...
Edit ...
In my attempt to provide detail I hope I haven't confused the issue.
In essence, my question is if I can type this exact string
grid_GroupA.data.add(newItem);
and it works for my function, how can I place a variable with the exact string "grid_GroupA" in front of ".data.add(newItem);" and have it seen the same as the line of code that works? Maybe my lack of knowledge here is getting in the way but isn't the line of code that works just a string that is then used to 'find' the object? So, if that assumption is correct, how do I create that same string with the variable? If my assumption is wrong I am a willing learner so I will be all ears. Thank you.

I do not see how grid_target is an object. You are passing grid_name(which is a string) to the function, so grid_target will have no data property, because string doesn't have such a member.
P.S. snake_case is bad option for JavaScript, consider using cameCase instead

Related

How to change an attribute of a javascript prototype object

html base
<html>
<head>
</head>
<body>
<input type="text" class="abc"/>
</body>
</html>
So I have my prototype object
function AnArray(){
this.anArray=[];
}
AnArray.prototype.getAnArray=function(val){
return this.anArray[val];
}
AnArray.prototype.setData=function(index,val){
this.anArray[index].data=val;
}
var objAnArray=new AnArray();
the object ends up looking like this
id: 1, pid: "questions-worth-asking", num: 1, data: null
and I'm trying to change an attribute in it like so
objAnArray.setData(0,$(".abc").eq(0).val());
When I've rune console.log messages using getAnArray() before and after the above line, it returns the same value as it has not been changed.
My question is how do you change attributes of a prototype object?
edit: This link led me down the right path http://www.gpickin.com/index.cfm/blog/websql-when-is-a-javascript-object-not-a-javascript-object
You're missing a lot of information from your post that makes it difficult to debug.
From my understanding the problem is that:
You want your jQuery object's value property to be stored in an array that you wrapped in an object.
You want to store this property with the setData function you wrote.
You want to retrieve that object by using the getAnArray function you wrote.
I don't think this is an issue with prototypes, but with the lack of information given to us, it could be any number of things. I wouldn't be surprised if you came back and said "Oh, it was something else completely."
I've made a fiddle that successfully sets and gets data from the anArray objects that you can use as an example.
Here are some problems you want to look at that will help you debug:
You don't set the anArray[index] object in this snippet. So if we are to take this at face value, the setData function should throw a ReferenceError.
You haven't told us if you're calling the setData function inside an event or right when the page loads. If it's the latter, then according to the html you posted at the top, you won't have any data in the input field yet. You need to call the setData function only when there's data in the field.
You might be calling the jQuery object outside of the $(document).ready(function(){ ... }) call so the value you're obtaining with $(".abc") call is undefined.
Give those a try and hopefully those work.
To make your questions easier to debug going forward:
Write all your experimental code in an isolated environment so that all the confidential content content doesn't have to be removed before posting.
Run your code and make sure it runs as expected.
Show us all of that code so that we know where all the data comes from and how each element interacts with the other elements. For example, we currently don't know how the anArray array is populated so I've had to make assumptions. We also don't know how id, pid, or "questions-worth-asking" comes from so there might be side effects from how those are loaded in.
Write your code using some sort of style guide to make it easier to read. This will also help improve debug time for you and will help prevent errors from silly mistakes that you might make.
Edit:
I know you're calling console.log before and after the setData method. Consider putting console.log inside the setData method as well.
AnArray.prototype.setData = function (index, val) {
console.log("Entering setData with: ", index, val, this.anArray[index]);
this.anArray[index].data = val;
console.log("Exiting setData with: ", this.anArray[index]);
};
It seems to me that the problem isn't in your javascript. You're saying that you ran a console.log before and after your setData call on objAnArray. Perhaps it has something to do with your HTML input element not being updated, or the data not coming through in time.
Like Keane said, we need more info about your set up and logic flow.

JavaScript - case sensitivity issue within an object/property

I have an issue with JavaScript case sensitivity and I will need your valuable piece of advice here. I have the following object created:
var foo = function () {
this.myColor1 = '#000000';
this.MyColor2 = '#FF2000';
this.MyCOLOR3 = '#FFFFFF';
}
as you can see, each property may come in any case form, lowercase, uppcase, mixed, etc. These values are coming from a database and I don't have control onto them.
I want to be able to call them ignoring the case sensitivity. For example, I would like to be able to call them like this:
console.log(foo.mycolor1);
// or
console.log(foo.myColor1);
I guess my only approach to achieve this, would be to convert everything in, let's say, lowercase when I define those, and then, when I call them back to convert my request into lowercase again.
A little piece of background here; my aim is to provide an SDK to a few developers that they will write their own code for a platform I am working on. These values will be saved by the developers themselves into a database. For some reason, all those values are stored in lowercase. So, I either have to tell them 'no matter how you set them, you should request everything in lowercase', or, ideally, I should find a way to convert everything before their request is post.
An idea would be to write a method, and tell them to make the request like this
foo('mycolor1');
foo, is going to be a function that would handle the case sensitivity easily. But, I would prefer to use the foo.mycolor1 notation, so ... your help is needed :)
FYI, jQuery is available!
Thank you,
Giorgoc
when you render the javascript from DB use toLower() to set the variables names... and then reference them in lower case...

Getting the prototype of an object as a string with javascript

So I have a situation where I am trying out some DI based approached in JS, now lets not discuss the worth or validity of DI in JS etc let us just focus on the question.
So I get a targetConstructor, which would be something like:
function SomeClass(){};
doSomethingWithTargetConstructor(SomeClass);
So the above would pass the constructor of SomeClass into the method and that all works fine, however there is a test case which I cannot find a way to solve, as the targetConstructor will be a named function so you can extract the name from it. However the below situation does not work:
var someRootNamespace = {};
someRootNamespace.someSubNamespace = {};
someRootNamespace.someSubNamespace.someNamespacedClass = function(someArg){};
doSomethingWithTargetConstructor(someRootNamespace.someSubNamespace.someNamespacedClass);
So in the above example you cannot extract the name of the target constructor as it is a nameless function, HOWEVER in the debugger (as seen below) you can see that the targetConstructor prototype does contain the name information needed.
As basically I want the string representation of someRootNamespace.someSubNamespace.someNamespacedClass
However I cannot for the life of me find a way to get at the information shown in the debugger, so is it even possible to get at? and if so how do you go about it? as the information is there, I just need a way to get access to it.

EmberJS - Adding a binding after creation of object

I am trying to bind a property of an object to a property that's bound in an ArrayController. I want all of this to occur after the object has already been created and added to the ArrayController.
Here is a fiddle with a simplified example of what I'm trying to achieve.
I am wondering if I'm having problems with scope - I've already tried to bind to the global path (i.e. 'App.objectTwoController.objectOne.param3') to set the binding to. I've also tried to bind directly to the objectOneController (which is not what I want to do, but tried it just to see if it worked) and that still didn't work.
Any ideas on what I'm doing incorrectly? Thanks in advance for taking the time to look at this post.
So in the example below (I simplified it a little bit, but same principles apply)... The method below ends up looking for "objectOne" on "objectTwo" instead of on the "objectTwoController".
var objectTwoController: Em.Object.create({
objectOneBinding: 'App.objectOne',
objectTwoBinding: 'App.objectTwo',
_onSomething: function() {
var objectTwo = this.get('objectTwo');
objectTwo.bind('param2', Em.Binding.from('objectOne.param3'));
}.observes('something')
});
The problem is that you can't bind between two none relative objects. If you look in the "connect" method in ember you will see that it only takes one reference object (this) in which to observe both paths (this is true for 9.8.1 from your example and the ember-pre-1.0 release).
You have few options (that I can think of at least).
First: You can tell the objects about each other and in turn the relative paths will start working. This will actually give "objectTwo" an object to reference when binding paths.
....
objectTwo.set('objectOne', this.get('objectOne');
....
Second: You could add your own observer/computed property that will just keep the two in sync (but it is a little more verbose). You might be able to pull off something really slick but it maybe difficult. Even go so far as writing your own binding (like Transforms) to allow you to bind two non-related objects as long as you have paths to both.
_param3: function(){
this.setPath('objectTwo.param2', this.getPath('objectOne.param3');
}.observes('objectOne.param3')
You can make these dynamically and not need to pre-define them...
Third: Simply make them global paths; "App.objectOneController.content.param3" should work as your binding "_from" path (but not sure how much this helps you in your real application, because with larger applications I personally don't like everything global).
EDIT: When setting the full paths. Make sure you wait until end of the current cycle before fetching the value because bindings don't always update until everything is flushed. Meaning, your alert message needs to be wrapped in Ember.run.next or you will not see the change.

DOJO: Explanation of function parameters

So I asked an earlier question (Original Question). I got a great answer that did exactly what I wanted. However, since I am new to Javascript/Dojo, I wasn't able to fully understand it, and neither was the answerer of the question.
My question is: How does the following code work?
dndController: function(arg, params){
return new dijit.tree.dndSource(
arg, // don't mess up with the first parameter
dojo.mixin({}, params, {copyOnly:true}))
//create a copy of the params object, but set copyOnly to true
}
So the part bugging me the most is the "args" and "params" parameters. I don't understand where they come from and what they mean or represent. (If there needs to be more context to the code, I can edit the question later, so just post it in the comments). Also, why couldn't I just use the new dijit.tree.dndSource directly and why did I need to use the function to return it?
Thanks
Take a look at dijit/Tree.js in the dojo source.
in Tree.js, inside the postCreate function (which is used by any widget as a part of the dijit lifecycle):
if(this.dndController){
if(dojo.isString(this.dndController)){
this.dndController = dojo.getObject(this.dndController);
}
var params={};
for(var i=0; i<this.dndParams.length;i++){
if(this[this.dndParams[i]]){
params[this.dndParams[i]] = this[this.dndParams[i]];
}
}
this.dndController = new this.dndController(this, params);
}
You'll see a section which checks what the dndController property is. If it is a string it sets the dndController attribute to the function that creates the class that the string describes (this is what dojo.getObject(string) is doing).
For example if this.dndController was the string "my.special.dnd.controlller", it would return the function that, when called instantiates a new instance of my.special.dnd.controller.
It then copies some parameters into an object, followed by executing the function that was either:
(1) looked up via dojo.getObject
(2) uses the custom function you passed in.
I would assume the maintainer of this widget does it this way as some people only need to specify a specific class to use as the dnd controller, whereas others need to do some something more custom based on what parameters the Tree was passed.

Categories

Resources