将事件绑定到Coffeescript函数。 Backbone.js的

时间:2013-09-24 06:38:22

标签: backbone.js coffeescript haml

我正在尝试在OnChange事件上获取JSON。并对现有的haml页面进行更改。 我的目标是用json值填充另一个select字段。目前我正在尝试打印一条json被取出的消息。但我对html没有任何改变。

在控制台的网络选项卡中,我看到正在发出URL请求,并返回304响应。我也可以在回复中看到json。

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

haml文件看起来像这样。

.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')

获取json后如何更改.assignee。另外我如何访问json数据?

我有类似的功能。我不知道我在onChange函数中做错了什么。

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

1 个答案:

答案 0 :(得分:1)

我对HAML并不是那么大,但是这个:

%form
  %section.repo-select
    %select{name: 'repository'}

应该成为这个HTML:

<form>
    <section class="repo-select">
        <select name="repository">
            <!-- ... -->
        </select>
    </section>
</form>

正确?这意味着没有任何东西可以与ID选择器#repo-select匹配,因此当然不会调用绑定到这些事件onChange的处理程序。

如果您想从<select>获取更改事件,那么您需要events中的类似内容:

'change [name=repository]'

有关详细信息,请参阅Backbone's View#delegateEventsjQuery's Selectors文档。

就你的消息而言,我认为你对Model#save论点之间的差异感到有些困惑:

  

保存 model.save([attributes], [options])

Model#fetch参数:

  

抓取 model.save([options])

save在第二个参数中使用两个参数进行回调,这样可行:

model.save {},
  success: (model) => ...
  error: => ...

但是fetch只接受一个参数,并且回调应该在该参数中,所以这个:

@model.fetch {headers : @token},
  success: (model) => ...
  error: => ...

无效,fetch甚至无法看到successerror回调。你想说这个:

@model.fetch
  headers: @token
  success: (model) => ...
  error: => ...

获取fetch的所有三个参数。