Backbone.js Playground

Developer
Christian Fleschhut
Size
2,812 Kb
Views
22,264
  1. Backbone.js Playground Previews
  2. Backbone.js Playground HTML Codes
  3. Backbone.js Playground CSS Codes
  4. Backbone.js Playground JS Codes

How do I make an backbone.js playground?

What is a backbone.js playground? How do you make a backbone.js playground? This script and codes were developed by Christian Fleschhut on 11 August 2022, Thursday.

Backbone.js Playground Previews
IQ Test

Backbone.js Playground - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Backbone.js Playground</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div>
<script type="text/template" id="todo-tmpl"> <label> <input type="checkbox" <% if (complete) { print("checked"); } %>> <span class="<% if (complete) { print("complete"); } %>"> <strong><%= title %>:</strong> <%= description %> </span> </label> <a class="cancel">&times;</a>
</script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Backbone.js Playground - Script Codes CSS Codes

.todos { margin: 0; padding: 0; list-style: none;
}
.todos li { position: relative;
}
.todos label { display: block; margin: 0 0 1px 0; padding: 20px; background: #eee;
}
.todos .complete { text-decoration: line-through;
}
.todos .cancel { position: absolute; top: 50%; right: 20px; margin-top: -9px; font-weight: bold; cursor: pointer;
}

Backbone.js Playground - Script Codes JS Codes

// Models
var Appointment = Backbone.Model.extend();
// Collections
var AppointmentList = Backbone.Collection.extend({ url: 'https://codepen.io/cfleschhut/pen/dyGek.js', model: Appointment
});
// Views
var AppointmentView = Backbone.View.extend({ tagName: 'li', className: 'todo', template: _.template($('#todo-tmpl').html()), events: { 'click [type=checkbox]': 'toggleComplete', 'click .cancel': 'cancel' }, initialize: function() { this.model.on('change', this.render, this); this.model.on('remove', this.remove, this); }, render: function() { this.$el.html(this.template(this.model.toJSON())); return this; }, toggleComplete: function() { this.model.set({complete: !this.model.get("complete")}); }, cancel: function() { this.model.set({canceled: true}); this.collection.remove(this.model); }
});
var AppointmentListView = Backbone.View.extend({ tagName: 'ul', className: 'todos', initialize: function() { this.collection.on('sync', this.render, this); //this.collection.on('change', this.render, this); //this.collection.on('add', this.addOne, this); //this.collection.on('destroy', this.remove, this); }, render: function() { this.collection.forEach(this.addOne, this); return this; }, addOne: function(model) { var appointmentView = new AppointmentView({ model: model, collection: this.collection }); this.$el.append(appointmentView.render().el); }, remove: function() { this.$el.remove(); }
});
appointments = new AppointmentList();
appointments.fetch();
var appointmentListView = new AppointmentListView({ collection: appointments
});
$('#app').html(appointmentListView.el);
Backbone.js Playground - Script Codes
Backbone.js Playground - Script Codes
Home Page Home
Developer Christian Fleschhut
Username cfleschhut
Uploaded August 11, 2022
Rating 3
Size 2,812 Kb
Views 22,264
Do you need developer help for Backbone.js Playground?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian Fleschhut (cfleschhut) Script Codes
Name
Givie.io Logo in CSS
Json data for todolist
CodeSchool Powering Up with React
AngularJS tutorial app
React-Bootstrap sandbox
Processing.js Playground
Vertical Tab Component
CSS3 loading spinner
Playing with firebase
Starting out with Ember.JS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!