I've bumped up against this before and I need the help of someone smarter than me!
How can I attach an event of an element to a method of a class? More specifically, the same class? Is there a better way?
Using a Qt widget style approach, I've been trying to create self-contained "widget" objects in javascript. I'm using the Prototype javascript framework and building my widget as a class. Then, using Event.observe, I've tried to attach the event to a method of the class. But the Event assignment unbinds the assigned method. Here's an example of a simple table I'm trying to build that has clickable column headers:
Objectify.Grid.Table = Class.create({
initialize: function(headers) {
this.columns = headers;
this.rows = [];
},
addRow: function(GridData) {
var len = this.rows.push(GridData);
return len-1;
},
getRow: function(rowIndex) {
return this.rows[rowIndex];
},
build: function(parent) {
this.mainTable = new Element('table',{'class':'Objectify-Grid'});
$(parent).update(this.mainTable);
var tableBody = new Element('tbody',{});
this.mainTable.update(tableBody);
var headerRow = new Element('tr',{'class':'Objectify-Grid-header-row'});
tableBody.update(headerRow);
this.columns.each(function(val,id) {
var hcell = new Element('td',{'class':'Objectify-Grid-header-cell'}).update(val);
headerRow.insert(hcell);
// EVENT ASSIGNMENT //
hcell.observe('click',this.respondToClick);
/////////////////////
}.bind(this));
this.rows.each(function(GridData,id) {
var row = new Element('tr',{'class':'Objectify-Grid-row','id':'Objectify-Grid-row'+id});
tableBody.insert(row);
this.columns.each(function(columnName,index) {
var cell = new Element('td',{'class':'Objectify-Grid-cell'}).update(GridData.getValue(columnName));
row.insert(cell);
});
}.bind(this));
},
// RECEIVING METHOD //
respondToClick: function(event) {
var columnName = event.element().innerHTML;
// "this" is no longer bound in this method
this.sortColumnAsc(columnName); // [ERROR]
}
});
I think that you should do this :
hcell.observe('click',this.respondToClick.bindAsEventListener(this));
and the second argument of the "each" method is the object to bind the function to, so you can do this:
array.each(someFunction, this);
instead of
array.each(someFunction.bind(this));
I'm not too familiar with Prototype, but what does this refer to in the respondToClick event handler? If I had to guess, I'd say it referred to the clicked DOM element, and not the object instance you wanted.
Perhaps you can assign the grid to a property the DOM element and reuse that property during the respondToClick function, as in:
myDOMElement.someProperty = grid;
//and later
this.somePropery.sortColumnAsc(columnName);
Related
i want to bind an event handler to my (dynamic) javascript object, but it doesnt work how i think.
Do you have an idea how i could solve it?
What i want is to call an object function on a custom event. Or in other words i want to bind an event listener to an update function of my object.
For example i have my demo object:
var Demo = function (name) {
this.name = name;
var eventCounter = 0;
this.updateCounter = function () {
eventCounter++;
}
//...
};
Then i create multiple dynamic instances from it, like for example
var names = ["Jon", "Doe", "Max", "Mustermann"]
for(var i in names) {
new Demo(names[i])
}
and sometimes i want to update this Demo instance with a custom event.
document.dispatchEvent(new CustomEvent("CUSTOMEVENT"));
so my question is, how can i achieve something like the following
document.addEventListener("CUSTOMEVENT", function(){
// how to get the dynamic Demo instance?
// i want something like Demo.updateCounter()
});
My idea was to push the demo object into an array like
var names = ["Jon", "Doe", "Max", "Mustermann"]
var elementsToUpdate = [];
for(var i in names) {
elementsToUpdate[i] = new Demo(names[i])
}
and then in the event listener i can access them by
document.addEventListener("CUSTOMEVENT", function(){
elementsToUpdate[i].updateCounter()
});
But it feels a little ugly to me. So maybe there is a better solution for updating a dynamic instance of an object.
Thanks in advance
I`m attempting to bind an observable array of people two a two column responsive layout with click events using knockoutjs.
I have created a custom binding called TwoCol that loops through the array, and appends nodes to the DOM to create my suggested layout, but the click events are giving me trouble when I try to apply them in a custom binding nested in a loop.
I have played with it quite a bit, and encountered all types of results, but where I`m at now is calling my ~click~ event during binding, rather than on click.
http://jsfiddle.net/5SPVm/6/
HTML:
<div data-bind="TwoCol: Friends" id="" style="padding: 20px">
JAVASCRIPT:
function FriendsModel() {
var self = this;
this.Friends = ko.observableArray();
this.SelectedFriend = "";
this.SetSelected = function (person) {
alert(person);
self.SelectedFriend = person;
}
}
function isOdd(num) {
return num % 2;
}
ko.bindingHandlers.TwoCol = {
update: function (elem, valueAccessor) {
var i = 0;
var rowDiv;
var vFriends = ko.utils.unwrapObservable(valueAccessor());
$(elem).html('');
while (i < vFriends.length) {
//create row container every other iteration
if (!isOdd(i)) {
rowDiv = document.createElement("div");
$(rowDiv).addClass("row-fluid");
elem.appendChild(rowDiv);
}
//add column for every iteration
var colDiv = document.createElement("div");
$(colDiv).addClass("span6");
rowDiv.appendChild(colDiv);
//actual code has fairly complex button html here
var htmlDiv = document.createElement("div");
var htmlButton = vFriends[i]
htmlDiv.innerHTML = htmlButton;
colDiv.appendChild(htmlDiv);
//i think i need to add the event to the template too?
//$(htmlDiv).attr("data-bind", "click: { alert: $data }")
//it seems that the SetSelected Method is called while looping
ko.applyBindingsToDescendants(htmlDiv, { click: friends.SetSelected(vFriends[i]) });
i++;
}
return { controlsDescendantBindings: true };
}
}
var friends = new FriendsModel();
friends.Friends.push('bob');
friends.Friends.push('rob');
friends.Friends.push('mob');
friends.Friends.push('lob');
ko.applyBindings(friends);
I don't think you're using ko.applyBindingsToDescendants correctly. I admit I'm a little confused as to the meaning of some of the values in your code, so I may have interpreted something incorrectly.
Here's a fiddle where I think it's working the way you intended:
http://jsfiddle.net/5SPVm/7/
http://jsfiddle.net/5SPVm/8/
Notice if manually control descendant bindings (return { controlsDescendantBindings: true };), you need to set that up in the init callback, instead of update. The update callback is too late for that.
Quick rundown of the changes (edited):
Moved the controlsDescendantBindings into the init binding callback
Added the necessary parameter names to the binding param list to access additional values.
I re-enabled the html.attr call. Notice that now, because the binding context is set to the actual item, the SetSelected method doesn't exist at that level anymore, so it is necessary to use $parent.SetSelected.
$(htmlDiv).attr("data-bind", "click: $parent.SetSelected")
Fixed the ko.applyBindingsToDescendants call. This method takes a binding context, which is created from the current binding context, and also takes the element to apply the binding to. You don't want to reapply the binding, which is why this whole thing needs to be in the init handler.
var childBindingContext = bindingContext.createChildContext(vFriends[i]);
ko.applyBindingsToDescendants(childBindingContext, colDiv);
I've a page that is generated dynamically, and that includes certain number (user-dynamically-defined) of advanced scatter plot charts. I intend to create a JavaScript object which defines the scatter plot itself, i.e. which takes some parameters, some data, and some container ID, and which will create the various elements needed to obtain the visualisation: canvas elements, toolbar, etc.. To do so, I started with the following (simplified) class:
(function () {
if (!this.namespace) { this.namespace = {};}
this._instances = { index: 0 };
this.namespace.ScatterPlot = function (containerId, file, options) {
_instances.index ++;
this.id = this.containerId+"-"+_instances.index ;
this.containerId = containerId ;
_instances [this.id] = this;
// ... Do stuffs with file and options ...
// Initialize elements once the DOM is ready
$(this.updateDOM);
}
namespace.ScatterPlot.prototype = {
updateDOM: function() {
$("<canvas>")
.click(clickCallback)
.appendTo("#"+this.containerId);
//(...)
},
clickCallback: function() {
alert("Some click: "+this.id);
}
}
})();
Each object can be created with:
var v1 = new namespace.ScatterPlot("container1", "foo", "foo");
var v2 = new namespace.ScatterPlot("container2", "foo", "foo");
There are two problems here: (1) in updateDOM, 'this' does not make reference to my initial ScatterPlot object, which means that this example will never work, and (2) similarly, the clickCallback will not be able reference the scatterplot with 'this' either.
I'm new to javascript, and I'm still struggeling to understand the logic of OO programming in javascript, so the question is: I'm I taking the wrong direction here ? After some digging, I could roughly achieve what I wanted by passing this to updateDOM:
$(this.updateDOM(this)); // This blows my eyes but does the trick, at least partially
updateDOM: function(that) {
$("<canvas>")
.click(that.clickCallback)
.appendTo("#"+that.containerId);
//(...)
},
clickCallback: function() {
// Not working either... Should pass 'that' to the function too
alert("Some click: "+this.id);
}
But I don't feel this patters to be very elegant... And the problem is not fixed either regarding the click callback.
Thoughts ?
Have a look at MDN's introduction to the this keyword.
The standard ways of dealing with that issue are using a that variable - not as an argument, but in a separate function:
var that = this;
$(function() {
that.updateDOM();
});
// or
$(this.getClickCallback());
...
namespace.ScatterPlot.prototype.getClickCallback = function() {
var that = this;
return function clickCallback(e) {
alert("Some click: "+that.id);
};
};
Alternatively, you can always use .bind() (or $.proxy for older browsers) which do quite what the second example does in a more generic way:
$(this.clickCallback.bind(this));
Hi I'm trying to author a jQuery plugin and I need to have methods accessible to elements after they are initialized as that kind of object, e.g.:
$('.list').list({some options}); //This initializes .list as a list
//now I want it to have certain methods like:
$('.list').find('List item'); //does some logic that I need
I tried with
$.fn.list = function (options) {
return this.each(function() {
// some code here
this.find = function(test) {
//function logic
}
}
}
and several other different attempts, I just can't figure out how to do it.
EDIT:
I'll try to explain this better.
I'm trying to turn a table into a list, basically like a list on a computer with column headers and sortable items and everything inbetween. You initiate the table with a command like
$(this).list({
data: [{id: 1, name:'My First List Item', date:'2010/06/26'}, {id:2, name:'Second', date:'2010/05/20'}]
});
.list will make the <tbody> sortable and do a few other initial tasks, then add the following methods to the element:
.findItem(condition) will allow you to find a certain item by a condition (like findItem('name == "Second"')
.list(condition) will list all items that match a given condition
.sort(key) will sort all items by a given key
etc.
What's the best way to go about doing this?
If you want these methods to be available on any jQuery object, you will have to add each one of them to jQuery's prototype. The reason is every time you call $(".list") a fresh new object is created, and any methods you attached to a previous such object will get lost.
Assign each method to jQuery's prototype as:
jQuery.fn.extend({
list: function() { .. },
findItem: function() { .. },
sort: function() { .. }
});
The list method here is special as it can be invoked on two occasions. First, when initializing the list, and second when finding particular items by a condition. You would have to differentiate between these two cases somehow - either by argument type, or some other parameter.
You can also use the data API to throw an exception if these methods are called for an object that has not been initialized with the list plugin. When ('xyz').list({ .. }) is first called, store some state variable in the data cache for that object. When any of the other methods - "list", "findItem", or "sort" are later invoked, check if the object contains that state variable in its data cache.
A better approach would be to namespace your plugin so that list() will return the extended object. The three extended methods can be called on its return value. The interface would be like:
$('selector').list({ ... });
$('selector').list().findOne(..);
$('selector').list().findAll(..);
$('selector').list().sort();
Or save a reference to the returned object the first time, and call methods on it directly.
var myList = $('selector').list({ ... });
myList.findOne(..);
myList.findAll(..);
myList.sort();
I found this solution here:
http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html
This seems to do exactly what I need.
(function($) {
var TaskList = function(element, options)
{
var $elem = $(element);
var options = $.extend({
tasks: [],
folders: []
}, options || {});
this.changed = false;
this.selected = {};
$elem.sortable({
revert: true,
opacity: 0.5
});
this.findTask = function(test, look) {
var results = [];
for (var i = 0,l = options.tasks.length; i < l; i++)
{
var t = options['tasks'][i];
if (eval(test))
{
results.push(options.tasks[i]);
}
}
return results;
}
var debug = function(msg) {
if (window.console) {
console.log(msg);
}
}
}
$.fn.taskList = function(options)
{
return this.each(function() {
var element = $(this);
if (element.data('taskList')) { return; }
var taskList = new TaskList(this, options);
element.data('taskList', taskList);
});
}
})(jQuery);
Then I have
$('.task-list-table').taskList({
tasks: eval('(<?php echo mysql_real_escape_string(json_encode($tasks)); ?>)'),
folders: eval('(<?php echo mysql_real_escape_string(json_encode($folders)); ?>)')
});
var taskList = $('.task-list-table').data('taskList');
and I can use taskList.findTask(condition);
And since the constructor has $elem I can also edit the jQuery instance for methods like list(condition) etc. This works perfectly.
this.each isn't needed. This should do:
$.fn.list = function (options) {
this.find = function(test) {
//function logic
};
return this;
};
Note that you'd be overwriting jQuery's native find method, and doing so isn't recommended.
Also, for what it's worth, I don't think this is a good idea. jQuery instances are assumed to only have methods inherited from jQuery's prototype object, and as such I feel what you want to do would not be consistent with the generally accepted jQuery-plugin behaviour -- i.e. return the this object (the jQuery instance) unchanged.
I have two script controls, one holds the other, and I have successfully been able to handle events from the child on the parent using:
initialize: function()
{
this._autoComplete = $get(this._autoCompleteID);
this._onAutoCompleteSelected = Function
.createDelegate(this, this.handleAutoCompleteSelected);
var autoControl = this._autoComplete.control;
autoControl.addItemSelected(this._onAutoCompleteSelected);
...
}
Where addItemSelected(on the child) is:
addItemSelected: function(handler)
{
list = this.getEvents();
list.addHandler('userItemSelected', handler);
},
and getEvents is:
getEvents: function()
{
if (this._events == null)
{
this._events = new Sys.EventHandlerList();
}
return this._events;
},
Problem is that on dispose of the parent, I want to do the same thing:
dispose: function()
{
var autoControl = this._autoComplete.control;
autoControl.removeItemSelected(this._onAutoCompleteSelected);
...
}
but, .control no longer exists. I'm guessing this is because the child control has already been disposed and thus the .control property no longer works.
In light of this, I decided to run though the event list on the child and remove all the event handlers in it.
dispose: function()
{
list = this.getEvents();
for(var item in list._list)
{
var handler;
handler = list.getHandler(item);
list.removeHandler(item, handler);
}
....
}
Is there a better way to do this?
I'm not sure that the "control" expando property on the DOM element is the right way to reference the control object. It is managed by the framework and as you're seeing, I think it's already munged by the time your dispose is called.
Have you tried using $find instead of $get and reworking your references this way?:
initialize: function()
{
this._autoControl = $find(this._autoCompleteID);
this._onAutoCompleteSelected = Function
.createDelegate(this, this.handleAutoCompleteSelected);
this._autoControl.addItemSelected(this._onAutoCompleteSelected);
}
dispose: function()
{
this._autoControl.removeItemSelected(this._onAutoCompleteSelected);
this._autoControl = null;
}
Oh yeah and where you reference the DOM element stored in this._autoComplete you instead go through the control object itself:
this._autoControl.get_element();
So basically invert the logic of "get element => get control object" to "get control object => get element".