CODEWITHSUNDEEP
javascriptfamo.us
Subtubes
Subtubes

Reputation: 16873

Is there a way to listen for an event on a DOM element with a particular class with famo.us

I am trying to listen to a DOM element event with famous in a similar way as the jQuery .on listner. basically I am trying to do this with famo.us

var surface = new Surface({content: '<div>' +
                                     '<button class="close">Close</button>'             
                                     '<button class"edit">Edit</button>' +
                                    '</div>'});

surface.on("click", ".edit", function () {

    console.log("edit button has been clicked");
});

Obviously it doesn't work like that in famo.us because you cannot sue a selector as the second argument but I wanted to know how I would go about this sort of situation in famo.us.

Upvotes: 0

Views: 89

Answers (1)

Tim Daley
Tim Daley

Reputation: 145

In Famo.us the EventHandler.on method only takes two parameters:

EventHandler.prototype.on = function on(type, handler)

There are two options that I know of that you can take to get this done.

  1. Inject jQuery into your project then use the selector after the EventHandler catching 'click' (Really not preferred)
  2. Override the EventHandler method and code up the selector usage

I understand what you are looking for but I would propose a different setup if you are using pure Famo.us code. I would recommend that instead of creating a partial HTML block to put in the content I would put separate surfaces for each button in a ContainerSurface. You will get similar HTML output but will have all functionality of Famo.us on each surface. I have put a small snippet together for you below. Hope this is of some help.

var buttonContainer = new ContainerSurface({
    classes: ['editbuttons']
});

var deleteButton = Surface({
    classes: ['delete']
});

var deleteButtonModifier = new Modifier();

var editButton = Surface({
    classes: ['edit']
});

var editButtonModifier = new Modifier();

buttonContainer.add(deleteButtonModifier).add(deleteButton);
buttonContainer.add(editButtonModifier).add(editButton);

deleteButton.on('click',function() {
    // Event code
});

editButton.on('click',function() {
    // Event code
});

Upvotes: 1

Related Questions