We Keep Coding

Javascript, access each object inside one main object - module pattern

I created small component thats going through all select elements and creating unordered lists from it so that i can style it easily. Everything works just like i wanted. Here is the script:
https://github.com/goranefbl/softdrop
You fire it like this:
SoftDrop.init({
selector:'input_select',
mobile:true
});
and its looping through every "input_select" element and creating new nodes for it. But that is all one single object, and i dont have a way to access for example specific select element, if i want to push an item to it, or to close it with some public method.
For every element, i am adding data-softdrop="i" to it, so this way i could easily target it with:
document.querySelectorAll("[data-softdrop='i']")
and it works. But if i want to do this from within component, something like this:
var selects = SoftDrop.init({
selector:'input_select',
mobile:true
});
selects.data('something').open();
How would i go with doing this? I would create some array of objects at the top and during forEach call, push it there, then access it how ? To be able to have public methods on specific select elements.
Thanks

One way to achieve this would be to create a data object inside your component and add each entry as property to this object, e.g. like this:
data['something'] = myElement;
Then, later, you could access the element again and invoke methods on it, e.g.
data['something'].open();
Is that what you have in mind?

Is there other way to reference grandParent object in javascript

I have following code:
var objectParent:{
child1:{
test1:function(){},
test2:function(){}
},
child2:{
demo1:function(){},
demo2:function(){},
parent:this // gives child2
grandparent: .... // need to reference objectParent here
}
}
We can reference object by using this keyword, But what for grand object or i mean parent of parent object?
Now, i am using grandparent:objectParent to reference parent object
Is there other way like this selector to reference parentObject?
Are these my coding is bad,good or better?

If all your objects have a parent property that refers to their parent, then can get the grandparent with object.parent.parent.

It's not real clear what you're trying to do.
If you have an element reference elem, then you can get its parent with elem.parentNode. You can get a parent's parent (e.g. a grandparent) with elem.parentNode.parentNode and so on.
If this isn't what you're trying to do, please explain in more detail what you mean by a grandparent object.
If you're not talking about DOM references at all and instead are asking about nested objects in plain javascript, then javascript does not contain any way to get the parent object that you are contained within. You would have to create a property on the child and set it if you need it that way after you've constructed the object (you can't set it with a static declaration either).

I had to do div.parentElement.parentElement to achieve it.
One way to see what to access is by logging div.__proto__ to the console which shows you a long list of properties & methods you can call.

knockout.js referring to parent object

I have a complex knockout.js object which is effectively an observableArray with another observableArray inside. I have a remove function which asynchronously removes chosen element from the second array. An item is being archived in the database, while one of its observable properties on client side is being set to false making it to disappear from the screen.
A remove button event is created using $root keyword:
Remove
What gives me access to details of the chosen element using "this" keyword. My problem is, that while deleting item from the second array I would like to change something to its parent item in the first array. As I mentioned "this" keyword refers to the child item, is there any way I could access the parent item at the same time as well?

mhu's answer is a antipattern because it creates a dependency between ViewModel and the structure of the View.
Instead do
Remove
Parent Viewmodel
removeActivity: function(activity) {
this.activities.remove(activity);
}

Why does Backbone.Modelbinder only bind the last instance of a list of views

In a list of items, every item has its' own modelbinder object to bind the models' values.
The problem that I'm having could be reproduced: http://jsfiddle.net/goodafternoon/NmgkY/#base
Only the last element that appears in the list gets bound and thus only the that element responds to the models event listener
this.on("change", function() {
console.log('event');
});
I'm using ironcooks famous Modelbinder module : https://github.com/theironcook/Backbone.ModelBinder

Fixed it.
If you had a similar problem, here is the updated fiddle: http://jsfiddle.net/goodafternoon/XwT2k/1/
The problem was that I was creating a new instance of the ModelBinder object in the class rather than creating it when the model is instantiated, so there was only ever one ModelBinder, which is why I only ever got the binding on one element.

ExtJs 4, is there a way to find control? (not by "id")

I have button with id = 'someid', i can find it by Ext.getCmp('someid')...
Is there a way to set some kind of "extraId" to that button, and find that button by "extraId'?

The question is where you want to search to get your item.
Another way could be the itemId.
An itemId can be used as an alternative way to get a reference to a component when no object reference is available. Instead of using an id with Ext.getCmp, use itemId with Ext.container.Container.getComponent which will retrieve itemId's or id's. Since itemId's are an index to the container's internal MixedCollection, the itemId is scoped locally to the container -- avoiding potential conflicts with Ext.ComponentManager which requires a unique id.
Source and further documentation: http://docs.sencha.com/ext-js/4-0/#/api/Ext.AbstractComponent-cfg-itemId
The ComponentQuery (mentioned by wombleton) is also a good way but maybe not as performant as the itemId.

You can search for it by doing an Ext.ComponentQuery.
Example that will work in the console on the linked page:
Ext.ComponentQuery.query('button[text=OK]')
You can replace text=OK with the attribute you are searching for.

I don't have access to the ExtJS 4 API docs, but I know that in 3.X and previous verions have some other ways of getting references to your compoents without the use of the DOM ID.
If your components are part of a form or form panel, you should have access to a method called findField(). It is inherited from Basic Form. This method can take an id, dataIndex, name, or hiddenName to get a reference to your component.
There is also a helper method called findByType(xtype) that you can use to try and find your buttons. Another option would be to extend the button you use to place a unique property that you can use as a reference.

An alternative to id is itemId and it is limited to the scope of the container in which it is defined. So, in this case, there is not need to define globally unique itemId as done in case of id. We can use component query to get the component object having the itemId. Please follow this link where i have posted about how to use itemId and what is its benefit.
http://jksnu.blogspot.in/2012/11/use-itemid-instead-of-id.html