This is my first attempt of backbone.
I need to allow user to edit/show its inputs.
The dial list is fixed.
We can choose from a list of 0 to 9 dials for each of item.
I am currently using a GLOBAL variable var AVAILABLE_DIALERS = [0,1,2,3,4,5,6,7,8,9]; to hold the shared list of available dials.
Any other way to avoid this global variable AVAILABLE_DIALERS and any other suggestion/feedback is welcome.
Here's Code:
<!DOCTYPE html>
<html>
<head>
<title>Smart Dial</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<style stype="text/css">
#wrapper {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper" class="container">
<table class="table">
<tr>
<th>Choose Dial</th><th>Number</th><th>Description</th><th>Action</th>
</tr>
<script id="mytemplate" type='text/html'>
<% dial = dial === null ? 'Not assigned' : dial; %>
<td><%= dial %></td>
<td><%= number %></td>
<td><%= description %></td>
<td><button class="btn btn-primary edit">Edit</button></td>
</script>
<script id="mytemplate_edit" type='text/html'>
<%
var select = ['<select>','</select>'];
var options = [];
AVAILABLE_DIALERS.sort();
for(var i = 0;i < AVAILABLE_DIALERS.length;i++) {
options.push('<option value="' + AVAILABLE_DIALERS[i] + '">' + AVAILABLE_DIALERS[i] + '</option>');
}
select = select.join(options.join(''));
%>
<td><%= select %></td>
<td><input type="text" class="num" value="<%= number %>" /></td>
<td><input type="text" class="desc" value="<%= description %>" /></td>
<td><button class="btn save btn-primary">Save</button></td>
</script>
</table>
</div>
<script src="js/lib/jquery.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script type='text/javascript'>
var AVAILABLE_DIALERS = [0,1,2,3,4,5,6,7,8,9];
(function($){
var SmartDial = Backbone.Model.extend({
defaults: {
dial: null,
number : '',
description: ''
}
});
var List = Backbone.Collection.extend({
model: SmartDial
});
var ItemEdit = Backbone.View.extend({
tagName: '<tr>', // name of tag to be created
template:_.template($('#mytemplate_edit').html()),
events: {
'click button.save': 'save',
'click button.edit': 'editMode',
'keypress input' : 'examineEnter'
},
initialize: function(){
_.bindAll(this, 'render','editMode','save');
},
editMode : function() {
$('button.edit').prop('disabled',true);
this.render();
return this;
},
save : function () {
var selected_dial = +($(this.el).find('select').val());
// If dial has been asigned already, free the last one
if(this.model.get('dial') !== null) {
AVAILABLE_DIALERS.push(this.model.get('dial'));
}
AVAILABLE_DIALERS = _.reject(AVAILABLE_DIALERS, function(dial){ return dial === selected_dial });
this.model.set({
dial : selected_dial,
number : $(this.el).find('.num').prop('value'),
description: $(this.el).find('.desc').prop('value')
});
$('button.edit').prop('disabled',false);
console.log(this.model.toJSON());
var itemView = new ItemView({
model: this.model
});
$(this.el).html(itemView.render());
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
//return this.template(this.model.toJSON());
},
examineEnter : function (e) {
if(e.keyCode === 13) {
this.save();
}
},
// `unrender()`: Makes Model remove itself from the DOM.
unrender: function(){
$(this.el).remove();
},
remove: function(){
AVAILABLE_DIALERS.push(this.model.get('dial'));
this.model.destroy();
}
});
var ItemView = Backbone.View.extend({
tagName: '<tr>', // name of tag to be created
template:_.template($('#mytemplate').html()),
initialize: function(){
_.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
},
render: function(){
return this.template(this.model.toJSON());
},
});
var ListView = Backbone.View.extend({
el: $('#wrapper'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add' class='btn btn-primary'>Add new</button>");
_(this.collection.models).each(function(item){ // in case collection is not empty
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var sdial = new SmartDial();
sdial.set({
dial: null
});
this.collection.add(sdial);
},
appendItem: function(item){
var itemEdit = new ItemEdit({
model: item
});
$('table',this.el).append(itemEdit.render().el);
}
});
var listView = new ListView();
})(jQuery);
</script>
</body>
</html>
