backbone.js Getting started with backbone.js Example showcasing the basic concepts


The following example is an introduction to:

    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <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 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"
                    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,