Binding event to function Coffeescript. Backbone.js - backbone.js

Question

I am trying to fetch a JSON on OnChange event. And making changes to the existing haml page.
My aim is to populate another select field with the json values. At the moment I am just trying to print a message that json was fetched. But I get no change in the html.
In the network tab of the console, I see that the URL request is being made, and a 304 response is returned. I can also see the json in the response.
events:
"submit form" : "onSubmit"
"change [name=repository]" : "onChange"
onChange: (e) ->
e.preventDefault()
name = #$("[name=repository]").val()
localStorage['new_issue_last_repo'] = name
token = localStorage['oauth2_github']['accessToken']
#model = new Assignees(name)
console.log 'Printttttt'
#model.fetch {headers : #token},
success: (model) =>
#$('.assignee').html("<span>Fetched assignees</span>")
error: =>
#$('.assignee').html("<span>Failed to fetch assignees :(</span>")
The haml file looks like this.
.message
.assignee
%form
%section.repo-select
%select{name: 'repository'}
- for repository in #repositories.models
- full_name = repository.get('full_name')
- if localStorage['new_issue_last_repo'] == repository.get('full_name')
%option{value: full_name, selected: 'selected'}= repository.get('full_name')
- else
%option{value: full_name}= repository.get('full_name')
How can I get the .assignee to change once the json is fetched. Also how can I access the json data?
I have a similar function that works. I dont know what I am doing wrong in the onChange function.
onSubmit: (e) ->
e.preventDefault()
name = #$("[name=repository]").val()
localStorage['new_issue_last_repo'] = name
repository = #repositories.find (r) -> r.get('full_name') == name
model = new IssueModel({
body: #$("[name=body]").val()
title: #$("[name=title]").val()
assignee: #$("[name=assignee]").val()
milestone: #$("[name=milestone]").val()
}, {repository: repository})
model.save {},
success: (model) =>
#badge = new Badge()
#badge.addIssues(1)
#$('.message').html("<span>Issue ##{model.get('number')} was created!</span>")
error: =>
#$('.message').html("<span>Failed to create issue :(</span>")

Answer 1

I'm not that big on HAML but this:
%form
%section.repo-select
%select{name: 'repository'}
should become this HTML:
<form>
<section class="repo-select">
<select name="repository">
<!-- ... -->
</select>
</section>
</form>
right? That means that there is nothing that will match the ID-selector #repo-select so of course the handler bound to those events, onChange, will never be called.
If you want to get change-events from that <select>, then you'll want something like this in your events:
'change [name=repository]'
See Backbone's View#delegateEvents and jQuery's Selectors document for details.
As far as your messages go, I think you're a little confused about the difference between the Model#save arguments:
save model.save([attributes], [options])
and the Model#fetch arguments:
fetch model.save([options])
save takes two arguments with the callbacks in the second so this works:
model.save {},
success: (model) => ...
error: => ...
but fetch only takes one argument and the callbacks should be in that argument so this:
#model.fetch {headers : #token},
success: (model) => ...
error: => ...
won't work as fetch won't even see the success or error callbacks. You'd want to say this:
#model.fetch
headers: #token
success: (model) => ...
error: => ...
to get all three arguments to fetch.