www.webdeveloper.com
Results 1 to 3 of 3

Thread: MVC Help (Backbone)

  1. #1
    Join Date
    Dec 2010
    Posts
    63

    MVC Help (Backbone)

    Probably not the perfect place to ask this question, but I'll give it a try. I'm very new to MVC (Backbone in this case). Would anyone mind looking at my source code and giving some pointers? Specifically the 'swap' and 'edit' methods. I know I can optimize these. Thanks in advance.

    Working link can be found http://www.nickmuth.com/mavs

    Code:
    (function($) {
    
    Backbone.sync = function(method, model, success, error){ 
        success();
    };
    
    var Player = Backbone.Model.extend({
    	defaults: {
    		id: null,
    		fname: '',
    		lname: '',
    		number: '',
    		pos: '',
    		pic: 'Content/images/players/default.jpg',
    		height: '',
    		weight: '',
    		country: 'USA',
    		ppg: 0,
    		rpg: 0,
    		apg: 0
    }
    });
    
    var Roster = Backbone.Collection.extend({
    	model: Player
    });
    
    	var PlayerView = Backbone.View.extend({
    		tagName: 'tr',
    		
    		events: {
    			'click span.swap': 'swap',
    			'click span.edit': 'edit'
    		},
    		
    		initialize: function(){
    			_.bindAll(this, 'render', 'swap', 'edit');
    			this.model.bind('change', this.render);
    	
    		},
    		render: function() {
    			$(this.el).html( '<td> ' + this.model.get('number') + '</td>' 
    				+ '<td> ' + '<span class="swap"><a href="#">'+this.model.get('fname')+' '+this.model.get('lname')+'</a></span></td>' 
    				+ '<td> ' + this.model.get('pos') + '</td>'
    				+ '<td> ' + this.model.get('height') + '</td>'
    				+ '<td> ' + this.model.get('weight') + ' lbs.</td>'
    				+ '<td> <span class="edit"><a href="#"><i class="icon-cog"></i></a></span></td>'
    			);
    
    			return this; 
    		},
    		
    		swap: function() {
    			$("#player-name").text(this.model.get('fname') + ' ' + this.model.get('lname'));
    			$("#player-num").text('#' + this.model.get('number'));
    			$("#img-main").attr("src", this.model.get('pic'));
    			$("#player-num").text('#' + this.model.get('number'));
    			$("#ppg").text(this.model.get('ppg'));
    			$("#rpg").text(this.model.get('rpg'));
    			$("#apg").text(this.model.get('apg'));
    			$("#height").text(this.model.get('height'));
    			$("#weight").text(this.model.get('weight') + ' lbs.');
    			$("#country").text(this.model.get('country'));			
    		},
    		
    		edit: function() {
    			var self = this;
    			$("#editModal").modal('toggle');
    			$("#editPlayer_name").text(this.model.get('fname') + ' ' + this.model.get('lname'));
    			$("#edit-ppg").val(this.model.get('ppg'));
    			$("#edit-rpg").val(this.model.get('rpg'));
    			$("#edit-apg").val(this.model.get('apg'));
    			$("#save").click(function() {
    				self.model.set({ ppg: $("#edit-ppg").val(), rpg: $("#edit-rpg").val(), apg: $("#edit-apg").val()  }); 
    				self.swap();
    			});
    		}
    	});
    	
    
        var AppView = Backbone.View.extend({
            el: $('body'),
    
    		events: {
    			'click button#add': 'addPlayer'
    		},
    		
            initialize: function() {
                _.bindAll(this, 'render', 'addPlayer', 'appendPlayer');
    			
    			this.collection = new Roster();
    			this.counter = 0;
    			
    			// Add default data
    			this.collection.add([
    				{id: this.counter+=1, fname: "Dirk", lname: "Nowitzki", number: "41", pos: "Forward", height: "7-0", weight: "245", country: "Germany", ppg:21.6, rpg:6.7, apg:2.2,  pic: 'Content/images/players/dirk.jpg'},
    				{id: this.counter+=1, fname: "Shawn", lname: "Marion", number: "0", pos: "Forward", height: "6-7", weight: "228", country: "USA", ppg:10.6, rpg:7.4, apg:2.1, pic: 'Content/images/players/marion.jpg'},
    				{id: this.counter+=1, fname: "Vince", lname: "Carter", number: "25", pos: "Guard", height: "6-6", weight: "220", country: "USA", ppg:10.1, rpg:3.4, apg:2.3, pic: 'Content/images/players/vince.jpg'},
    				{id: this.counter+=1, fname: "Delonte", lname: "West", number: "13", pos: "Guard", height: "6-3", weight: "180", country: "USA", ppg:9.6, rpg:2.3, apg:2.0, pic: 'Content/images/players/delonte.jpg'},
    				{id: this.counter+=1, fname: "Brandon", lname: "Wright", number: "34", pos: "Forward", height: "6-10", weight: "210", country: "USA", ppg:6.9, rpg:3.6, apg:0.3, pic: 'Content/images/players/brandon.jpg'},
    				{id: this.counter+=1, fname: "Rodrigue", lname: "Beaubois", number: "3", pos: "Guard", height: "6-2", weight: "185", country: "France", ppg:8.9, rpg:2.8, apg:2.9, pic: 'Content/images/players/rod.jpg'}
    			]);
    			
    			this.collection.bind('add', this.appendPlayer);
                this.render();
            },
    
            render: function() {
    			var self = this;			
    			_(this.collection.models).each(function(item) {
    				self.appendPlayer(item);
    			}, this);
    				
            },
    		
    		addPlayer: function() {
    			this.counter += 1;
    			var player = new Player();
    			var number = $("#new-num").val();
    			var first_name = $("#new-fname").val();
    			var last_name = $("#new-lname").val();
    			var pos = $("#new-pos").val();
    			var height = $("#new-height").val();
    			var weight = $("#new-weight").val();
    			var country = $("#new-country").val();
    			var ppg = $("#new-ppg").val();
    			var rpg = $("#new-rpg").val();
    			var apg = $("#new-apg").val();
    			player.set({
    				id: this.counter,
    				number: number,
    				fname: first_name,
    				lname: last_name,
    				pos: pos,
    				height: height,
    				weight: weight,
    				country: country,
    				ppg: ppg,
    				rpg: rpg,
    				apg: apg
    			});
    			this.collection.add(player);
    			// reset modal values
    			$("#new-num").val('');
    			$("#new-fname").val('');
    			$("#new-lname").val('');
    			$("#new-pos").val('');
    			$("#new-height").val('');
    			$("#new-weight").val('');
    			$("#new-country").val('');
    			$("#new-ppg").val('');
    			$("#new-rpg").val('');
    			$("#new-apg").val('');	
    		},
    		appendPlayer: function(player) {
    			var playerView = new PlayerView({
    				model: player
    			});
    			$('#tbl-roster', this.el).append(playerView.render().el);
    		}
    			
        });
    
        var appView = new AppView();
    
    })(jQuery);

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You're pretty close. I suggest adding these tweaks:
    Code:
    var PlayerView = Backbone.View.extend({
    	tagName: 'tr',
    		
    	events: {
    		'click span.swap': 'swap',
    		'click span.edit': 'edit',
    		'click #save': 'save'
    	},
    		
    	initialize: function(){
    		_.bindAll(this, 'render', 'swap', 'edit');
    		this.model.bind('change', this.render);
    	
    	},
    	render: function() {
    		$(this.el).html( '<td> ' + this.model.get('number') + '</td>' 
    			+ '<td> ' + '<span class="swap"><a href="#">'+this.model.get('fname')+' '+this.model.get('lname')+'</a></span></td>' 
    			+ '<td> ' + this.model.get('pos') + '</td>'
    			+ '<td> ' + this.model.get('height') + '</td>'
    			+ '<td> ' + this.model.get('weight') + ' lbs.</td>'
    			+ '<td> <span class="edit"><a href="#"><i class="icon-cog"></i></a></span></td>'
    		);
    
    		return this; 
    	},
    		
    	swap: function() {
    		$("#player-name").text(this.model.get('fname') + ' ' + this.model.get('lname'));
    		$("#player-num").text('#' + this.model.get('number'));
    		$("#img-main").attr("src", this.model.get('pic'));
    		$("#player-num").text('#' + this.model.get('number'));
    		$("#ppg").text(this.model.get('ppg'));
    		$("#rpg").text(this.model.get('rpg'));
    		$("#apg").text(this.model.get('apg'));
    		$("#height").text(this.model.get('height'));
    		$("#weight").text(this.model.get('weight') + ' lbs.');
    		$("#country").text(this.model.get('country'));			
    	},
    		
    	edit: function() {
    		var self = this;
    		$("#editModal").modal('toggle');
    		$("#editPlayer_name").text(this.model.get('fname') + ' ' + this.model.get('lname'));
    		$("#edit-ppg").val(this.model.get('ppg'));
    		$("#edit-rpg").val(this.model.get('rpg'));
    		$("#edit-apg").val(this.model.get('apg'));
    	},
    
    	save: function() {
    		this.model.set({ ppg: $("#edit-ppg").val(), rpg: $("#edit-rpg").val(), apg: $("#edit-apg").val()  }); 
    		this.swap();
    	}
    });

  3. #3
    Join Date
    Dec 2010
    Posts
    63

    Thanks

    Thanks for the improvement, I will add this.

    Further though, I guess I'm thinking that I need to binding my textboxes and static fields to my collection, so the manual updating and swapping that I'm doing wouldn't be necessary? Does that make sense?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles