0

I have been trying to learn backbone.js, but I can't figure out why my click event isn't firing when I click the home link. I'm fairly new to backbone and I'm just not sure what am I missing? I've looked up a bunch of different tutorials on the net, but can't seem to find the lose hole. Please help!

Backbone.js

    var HomeView = Backbone.View.extend({
        el: $('.content'),

        events:{
            "click #home": "animateNavigation"
        },
        initialize: function(){
            _.bindAll(this, 'displayTrips'); 

            // Add the model collections
            this.collection = new ModelList();
            this.collection.bind('add', this.displayTrips); // Collection event binder
        },
        animateNavigation: function(){
            alert('test');

            return false;
        },
        displayTrips: function(params){
            var items = params.get('data');
        }
    });

    var home_view = new HomeView();

HTML

<div class="content">
     <div class="left">
        <ul>
            <li>
                <div class="nav_arrow"></div>                   
                <a href="home" class="active" id="home">
                    <img alt="Home" src="/assets/img/nav/left/star.png">
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="tropical" id="tropical">
                    <img alt="Tropical" src="/assets/img/nav/left/fins_grey.png">
                    <span>Tropical</span>
                </a>
            </li>
        </ul>
    </div>
</div>
Jason Biondo
  • 736
  • 5
  • 16
  • 34

3 Answers3

1

You're finding the element at the time the model is declared. If you have your script in the header or anywhere before this content, that element doesn't exist yet. I don't know that there should be any good reason to use $('.content') here anyway, just use '.content'

Edit: Well, I see you are also declaring a new instance of your view as well. I don't know if that line represents literally what you have in your script, or you just put it there for the purpose of demonstrating your basic use. I generally define the views and models elsewhere from the page logic (which would have the instances of those things), primarily so that I can reuse them.

JayC
  • 7,053
  • 2
  • 25
  • 41
0

Could you add

console.log(home_view.$el.html());

at the end, to check the Dom Element of home_view please. I assume that something goes wrong when binding the view to the Dom element.

schacki
  • 9,401
  • 5
  • 29
  • 32
0

I found this solved it for me:

var home_view = new HomeView({el:$('.content')});

UPDATE - better than that, do this:

var home_view = new HomeView({el:'.content'});

then this.$el will work as the above post says

sambooka
  • 51
  • 3