Simple Backbone page
<!doctype html>
<html>
<head>
<title>My TODOs</title>
<style>
.showElement{
display: block;
}
.hideElement{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="menu" class="menu cf"></div>
<h1></h1>
<div id="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" type="text/javascript"></script>
<script id="profileTemplate" type="text/template">
<div class="addNewSong">
<form name="addNewSong" method="post" id="addNewSong">
<input type="text" name="name"/>
<input type="title" name="title"/>
<textarea name="background"></textarea>
<buttion id="btn_addSong">Add Song</button>
</form>
</div>
<div class="profile">
<% _.each(data, function(song, loop) { %>
<div class="info">
<div class="name">
<div class="showElement"><%= song.name %></div>
<div class="hideElement">
<input type="text" class="songName" value=" <%= song.name %>"/>
</div>
</div>
<div class="title">
<div class="showElement"><%= song.title %></div>
<div class="hideElement">
<input type="text" class="songTitle" value=" <%= song.title %>"/>
</div>
</div>
<div class="background">
<div class="showElement"><%= song.background %></div>
<div class="hideElement">
<textarea class="songBackground"><%= song.background %></textarea>
</div>
</div>
<div class="delete">
<div class="showElement">
<button data-persion-id="<%= loop %>">Delete</button>
</div>
</div>
<div class="edit">
<div class="showElement">
<button data-persion-id="<%= loop %>">Edit</button>
</div>
</div>
<div class="done">
<div class="hideElement">
<button data-persion-id="<%= loop %>">Done</button>
</div>
</div>
</div>
<% }); %>
</div>
<br />
</script>
<script type="text/javascript">
var Song=Backbone.Model.extend({
initialize: function(){
console.log("Welcome to this world");
}
});
$.fn.serializeObject=function(){
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
var Album=Backbone.Collection.extend({
model: Song,
url: 'profiles.json',
initialize: function(){
console.log("Welcome to this world");
}
});
var StudentView = Backbone.View.extend({
collection:new Album(),
model:new Song(),
el:'#content',
currentAlbum:{},
template: _.template($('#profileTemplate').html()),
initialize: function(){
console.log("Welcome to this world");
this.collection.on("change remove", this.render, this);
},
events:{
"click .delete button": "deleteSong",
"click #btn_addSong": "addSong",
"click .edit":"editSong",
"click .done" : "updateSong"
},
deleteSong:function(e){
self=this;
target=e.target;
var songId=target.getAttribute("data-persion-id");
modelToRemove = this.collection.at(songId);
//this.collection.remove(modelToRemove);
//this.render();
modelToRemove.destroy();
},
addSong:function(){
var newValue=$('#addNewSong').serializeObject();
//this.model.
this.collection.add(newValue);
this.render();
},
editSong:function(e){
target=e.target;
var songId=target.getAttribute("data-persion-id");
$(target).parent().parent().siblings().children(".showElement").hide();
$(target).parent().parent().siblings().children(".hideElement").show();
$(target).parent().hide();
},
updateSong:function(e){
self=this;
target=e.target;
var songUpdate={};
var songId=target.getAttribute("data-persion-id");
songUpdate.title=$(target).parent().parent().parent().children().find(".songTitle").val();
songUpdate.name=$(target).parent().parent().parent().children().find(".songName").val();
songUpdate.background=$(target).parent().parent().parent().children().find(".songBackground").val();
modelToUpdate = this.collection.at(songId);
modelToUpdate.set(songUpdate);
this.render();
},
setup:function(){
self=this;
self.collection.fetch({
success: function (album) {
self.currentAlbum=album;
studentView.render();
}
});
},
render: function () {
var profileTemplate = this.template({data:this.currentAlbum.toJSON()});
this.$el.html(profileTemplate);
}
});
var studentView= new StudentView();
studentView.setup();
</script>
</body>
</html>
No comments:
Post a Comment