CODEWITHSUNDEEP
backbone.jscoffeescripthaml
shshank
shshank

Reputation: 2641

Binding event to function Coffeescript. Backbone.js

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 <a href=\"#{model.get("html_url")}\" target=\"_blank\">##{model.get('number')}</a> was created!</span>")
      error: =>
        @$('.message').html("<span>Failed to create issue :(</span>")

Upvotes: 0

Views: 375

Answers (1)

mu is too short
mu is too short

Reputation: 434685

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.

Upvotes: 1

Related Questions