Backbone - Study

Developer
Neviton
Size
2,539 Kb
Views
12,144
  1. Backbone - Study Previews
  2. Backbone - Study HTML Codes
  3. Backbone - Study CSS Codes
  4. Backbone - Study JS Codes

How do I make an backbone - study?

What is a backbone - study? How do you make a backbone - study? This script and codes were developed by Neviton on 25 November 2022, Friday.

Backbone - Study Previews
IQ Test

Backbone - Study - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Backbone - Study</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="form"> <form action=""> <input type="text" id="name" placeholder="Name" /> <input type="text" id="sport" placeholder="Sport" /> <input type="button" id="add" value="ADD" /> </form>
</div>
<div id="data"></div> <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.6.0/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 - Study - Script Codes CSS Codes

body { font: 1em Arial,sans-serif; color: #440; background-color: #440;
}
.form { background-color: #fff; border-radius: 4px;
}
.form input { margin: 5px; padding: 5px; border-radius: 4px; border: 1px solid #ddd;
}
#data ul { padding: 0;
}
#data ul li { background-color: #aa7; list-style: none; padding: 10px; margin: 1px 0; border-radius: 4px;
}

Backbone - Study - Script Codes JS Codes

var Model = Backbone.Model.extend({
});
var Collection = Backbone.Collection.extend({ model: Model, url: "http://www.mocky.io/v2/5410fbae9fc7cf97010fec41",
});
var FormView = Backbone.View.extend({ model: new Model(), el: 'form', events : { 'click #add': 'addModel', 'change input': 'updateModel' }, updateModel: function() { this.model.set({ name: this.$el.find('#name').val(), sport: this.$el.find('#sport').val() }); }, updateFields: function() { this.$el.find('#name').val(this.model.get('name')); this.$el.find('#sport').val(this.model.get('sport')); }, addModel: function() { if(this.model.isNew()) { console.log('ADD MODEL'); this.trigger('itemAdded', this.model); } else { console.log('SAVE MODEL'); this.model.save(); } this.model = new Model(); this.updateFields(); }
});
var ItemView = Backbone.View.extend({ tagName: 'li', events : { 'click': 'itemEdit' }, initialize: function(){ this.listenTo(this.model, 'change', this.render); }, render: function() { this.$el.html(_.values(this.model.toJSON()).join(' - ')); return this; }, itemEdit: function() { this.trigger('itemSelected', this.model); }
});
var MainView = Backbone.View.extend({ tagName: 'ul', events: { }, initialize: function() { this.collection = new Collection(); this.formView = new FormView(); this.listenTo(this.collection, 'add', this.addModel); this.listenTo(this.formView, 'itemAdded', this.addItem); this.collection.fetch(); }, addItem: function(model) { this.collection.set(model); /*this.collection.set({ name: this.formView.$el.find('#name').val(), sport: this.formView.$el.find('#sport').val() });*/ }, addModel: function(model) { var itemView = new ItemView({model: model}); this.listenTo(itemView, 'itemSelected', this.fillForm); this.$el.append(itemView.render().$el); }, fillForm: function(model) { //this.formView.model.set(model.toJSON()); this.formView.model = model; this.formView.updateFields(model); }, render: function() { return this; }
});
window.mainView = new MainView();
$('#data').html(window.mainView.$el);
Backbone - Study - Script Codes
Backbone - Study - Script Codes
Home Page Home
Developer Neviton
Username nevitones
Uploaded November 25, 2022
Rating 3
Size 2,539 Kb
Views 12,144
Do you need developer help for Backbone - Study?

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!

Neviton (nevitones) Script Codes
Name
Slick Carousel Sync
Display Flex IOS
JCarousel
Slick Carousel Sync - BUG - Updating current
IOS Scroll Event Values
Playing with Canvas
A Pen by Neviton
Flex Study
Isometric
D3 - Study 1
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!