Question

I am evaluating moving some jQuery code to Backbone and have a total noob question. I have a large set of jQuery events that exist on just standard html (not associated with a backbone view). What is the proper place to handle those. Something simple in jQuery:

<div class='my-thing'>click me</div>
<script>
  $(document).ready(function(){
     $('.my-thing').on('click',function(){
       alert('say hello');
     });
  });
</script>

In Backbone, it would seem to be something like:

events: {
     "mouseenter .my-thing":"say_again"
 },
 say_again: function(){
   alert('i want to say something');
 },

But where would I put this? Or structure this?

thx in advance

Answer 1

Typically you would organize them by view — that’s where you declare the events. This requires modularizing the layout of your UI to make it possible to restrict each event to the scope of the view.

Template

<script type='text/template' id='say-template'>
    <div class='say-container'>
        <div class='my-thing'>click me</div>
    </div>
</script>

View

var SayView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, "render");
        this.render();
    },

    el: "#container",

    template: _.template($("#say-template").html()),

    events: {
        "mouseenter .my-thing": "say_again"
    },

    say_again: function() {
        alert('i want to say...');
    },

    render: function() {
        this.$el.html(this.template());
    }
});

var sayView = new SayView();

HTML

<div id="container"></div>

Here’s a working demo.

---

Of course, nothing is stopping you from wiring up events in the normal way in the global scope of the application, if you need to. It’s just best to avoid as doing that tends to break the MVC pattern.