How to make a click event occur in BackboneJs

Question

I'm just staring to learn backboneJs and im stuck with one issue here. I'm trying to POST a record to a list where im unable to perform a click event on the button that will post the record. Below is the view im using:

BackboneView:

var NewSubAccount = Backbone.View.extend({
        initialize: function(){

        },
        el: '#sub-account-list'
        events:{
            'click #save' : 'saveList'
        },

        render: function(id){   

            debugger;
            value = new SubAccountModel();
            var template = $("#sub-account-list").html(_.template(createtmpl, {data:value.attributes}));



        },
        saveList: function(){
            debugger;

            value = new SubAccountModel();
            var values = $('form#create-sub-account').serializeArray();

            value.save(values, {
                success: function(value){

                    alert('hello');

                }
            });
        }




    });

HTML:

<form id="create-sub-account" role="form">

  <legend>Sub Account Creation</legend>


    <label><em>Account Name</em></label>
     <input type = "text" name ="name" value=""></input><br/>

     <label><em>Description</em></label>
     <input type = "text" name ="desc" value = ""></input><br/>

     <button type="submit" id="save">Save</button>
     <button id="cancel">Cancel</button>

 </form>

EDIT:

here is the router im using to render the 'newSubAccount':

routes: {    
      'new': 'newSubAccount', 
       },
events:{
      'click .create-sub-account' : 'savesubAccount'
  },
newSubAccount: function(){

        var newsubaccount = new NewSubAccount(); 
        newsubaccount.render();
    },

When i perform the click event, it dorectly takes me back to the main page, without even going into the debug mode ( i set a debugger at the value = new SubAccountModel(); , and it didnt go through. I'm wondering if my way of writing the click event is worng or im i missing something. Please anyone any ideas, appreciated. Thanks.Let me know if it needs more details.

Answer 1

The problem you have is clicking on the #save button is submitting the form, this is what is reloading the page. There are a couple of options you can do:

1) Make the save button a plain button rather than a submit button, so that it doesn't try to submit the form:

 <button type="submit" id="save" type="button">Save</button>

2) If your intention is to use the save to submit the form, then you should capture the submit of the form rather than the click of the button and prevent the form from submitting the to the server, consider the following:

var NewSubAccount = Backbone.View.extend({
    el: '#sub-account-list'
    events:{
        'submit form#create-sub-account' : 'saveList' //Listen for the submit event on the form.
    },
    render: function(id){
        value = new SubAccountModel();
        var template = $("#sub-account-list").html(_.template(createtmpl, {data:value.attributes}));
    },
    saveList: function(event){
        event.preventDefault(); // Prevent the form from submitting, as you are handling it manually

        value = new SubAccountModel();
        var values = $('form#create-sub-account').serializeArray();

        value.save(values, {
            success: function(value){
                alert('hello');
            }
        });
    }
});

The other advantage you get from listening to the form in this way, is that other methods of submitting the form (such as pressing enter) will also be collected and handled correctly as well.

As a side note:

You shouldn't have events in your router. Instead you should make views that handle all the user interaction.

Router - Deals with the interaction between the browser state (URL) and what the user sees (UI). Its main focus should be converting the URL into View s on the page (the UI).

View - Deals with the interaction between the user and the data. Its main focus is to display any data in the UI and allow the user to interact with it. For example, submitting a form.

Model - Deals with the interaction between the browser and the server (AJAX requests). Its main focus should be to handle the data that is saved/fetched from the server. The View should use models to encapsulate data and display it in the UI.