backbone.js Getting started with backbone.js Example showcasing the basic concepts
Example
The following example is an introduction to:
- Template compilation using underscore
- Accessing variables in a template
- Creating a view
- Rendering a view
- Showing a view
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
</head>
<body>
<div id="example_container"></div>
<script type="text/template" id="example_template">
<label><%= example_label %></label>
<input type="text" id="example_input" />
<input type="button" id="example_button" value="Search" />
</script>
<script type="text/javascript">
var ExampleView = Backbone.View.extend({
// Compile the template using underscore
template: _.template($("#example_template").html()),
events: {
"click #example_button": "onButtonClick"
},
initialize: function(options) {
this.customOption = options.customOption;
},
render: function() {
// Load the compiled HTML into the Backbone "el"
this.$el.html(this.template({
example_label: "My Search"
}));
return this; // for chaining, a Backbone's standard for render
},
onButtonClick: function(event) {
// Button clicked, you can access the button that
// was clicked with event.currentTarget
console.log("Searching for " + $("#example_input").val());
}
});
$(function() {
//show the view inside the div with id 'example_container'
var exampleView = new ExampleView({
el: $("#example_container"),
customOption: 41,
});
exampleView.render();
});
</script>
</body>
</html>
