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

Question

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.

score 1 · Accepted Answer · answered Dec 14 '14 at 20:23

1

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.

Inject jQuery into your project then use the selector after the EventHandler catching 'click' (Really not preferred)
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
});

answered Dec 14 '14 at 20:23

Tim Daley

145
3
10

first thank you for the response. the only issue with a new ContainerSurface is the new context that gets created with a ContainerSurface. Performance degrades with new contexts and also you have to set the perspective on it. So I was thinking of jQuery/Zepto to wrap the Famous Events. I think I might go with that and avoid the new context that gets created. – Subtubes Dec 14 '14 at 23:50
unless there is a third option, which I am not really seeing. – Subtubes Dec 14 '14 at 23:51
Yeah I found the documentation that referes to the new context that gets created with a new `SurfaceContainer` http://famo.us/university/lessons/#/famous-101/slideshow/31 – Subtubes Dec 15 '14 at 00:23
1

Yes this is true. I would assume that you could extend the surface class to centralize the events for your inner surfaces but I cannot guide you on that as I have never tried. Outside of the options above, you would have to inject some jQuery or other framework to make these events function the way you are describing. – Tim Daley Dec 15 '14 at 04:49
Yeah I am going to go with zepto since it is lighter than jQuery and has the same interface. I am trying to reduce the number of surfaces as much as possible and where I can so I drop the complexity. – Subtubes Dec 15 '14 at 17:26

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

1 Answers1