backbone.jsHow do I create a sample application using Backbone.js?
Creating a sample application using Backbone.js involves several steps.
- Include the Backbone.js library in the HTML file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
- Create a model to define the data structure for the application.
var Person = Backbone.Model.extend({ defaults: { name: '', age: 0 } });
- Create a collection to store the model instances.
var People = Backbone.Collection.extend({ model: Person });
- Create a view to render the model and handle user input.
var PeopleView = Backbone.View.extend({ tagName: 'ul', render: function(){ this.collection.each(function(person){ var personView = new PersonView({ model: person }); this.$el.append(personView.render().el); }, this); return this; } });
- Instantiate the model, collection and view.
var person = new Person({ name: 'John Doe', age: 30 }); var people = new People([person]); var peopleView = new PeopleView({ collection: people });
- Render the view.
$('#container').html(peopleView.render().el);
- Output:
<div id="container">
<ul>
<li>John Doe, 30</li>
</ul>
</div>
Helpful links
More of Backbone.js
- How do I use a template engine with Backbone.js?
- How do I use W3Schools to learn Backbone.js?
- How do I create tabs using Backbone.js?
- How do I use Backbone.js to create a YouTube video player?
- How do I use Backbone.js to create a wiki?
- How do Backbone.js and Express differ in their usage for software development?
- How can I migrate from Backbone.js to React?
- How can I use a template in Backbone.js?
- How can I use Backbone.js to render a view?
See more codes...