SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Backbone.js Click Event Isn't Firing

    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. What am I missing?

    Backbone.js
    Code:
    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');
    		
    		//console.log(items);
    		// All the logic for displaying the trips goes here
    		//for(i = 0; i < items.length; i++){
    			//console.log(items[i]);
    		//}
    	}
    });
    
    var home_view = new HomeView();
    HTML
    Code:
    <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>

  2. #2
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solution of this problem

    Quote Originally Posted by unemployment View Post
    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. What am I missing?

    Backbone.js
    Code:
    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');
    		
    		//console.log(items);
    		// All the logic for displaying the trips goes here
    		//for(i = 0; i < items.length; i++){
    			//console.log(items[i]);
    		//}
    	}
    });
    
    var home_view = new HomeView();
    HTML
    Code:
    <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>
    I am interested in you solution. How did you resolve it?

  3. #3
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,255
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Hi Fran83, welcome to the forums,

    This thread was started over a year and a half ago, but received no replies.
    So either the OP solved on their own, or has since moved on.

    In any case, posting in long dormant threads rarely proves helpful.

    Please start a new thread describing the problem you are now having.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •