MVC Help (Backbone)

[JavaScriptNick]

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

(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);

[toicontien]

You're pretty close. I suggest adding these tweaks:

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();
	}
});

[JavaScriptNick]

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?