javascript - How to make a click event occur in BackboneJs -

javascript - How to make a click event occur in BackboneJs -

i'm staring larn backbonejs , im stuck 1 issue here. i'm trying post record list im unable perform click event on button post record. below 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 business relationship 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 router im using render 'newsubaccount':

routes: { 'new': 'newsubaccount', }, events:{ 'click .create-sub-account' : 'savesubaccount' }, newsubaccount: function(){ var newsubaccount = new newsubaccount(); newsubaccount.render(); },

when perform click event, dorectly takes me main page, without going debug mode ( set debugger @ value = new subaccountmodel();, , didnt go through. i'm wondering if way of writing click event worng or im missing something. please ideas, appreciated. thanks.let me know if needs more details.

the problem have clicking on #save button submitting form, reloading page. there couple of options can do:

1) create save button plain button rather submit button, doesn't seek submit form:

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

2) if intention utilize save submit form, should capture submit of form rather click of button , prevent form submitting server, consider following:

var newsubaccount = backbone.view.extend({ el: '#sub-account-list' events:{ 'submit form#create-sub-account' : 'savelist' //listen submit event on form. }, render: function(id){ value = new subaccountmodel(); var template = $("#sub-account-list").html(_.template(createtmpl, {data:value.attributes})); }, savelist: function(event){ event.preventdefault(); // prevent form submitting, handling manually value = new subaccountmodel(); var values = $('form#create-sub-account').serializearray(); value.save(values, { success: function(value){ alert('hello'); } }); } });

the other advantage listening form in way, other methods of submitting form (such pressing enter) collected , handled correctly well.

as side note:

you shouldn't have events in router. instead should create views handle user interaction.

router - deals interaction between browser state (url) , user sees (ui). main focus should converting url views on page (the ui).

view - deals interaction between user , data. main focus display info in ui , allow user interact it. example, submitting form.

model - deals interaction between browser , server (ajax requests). main focus should handle info saved/fetched server. view should utilize models encapsulate info , display in ui.

javascript backbone.js