javascript - 没有集合的主干模型。向服务器发送重复数据？

Question

我有一个由 Rails 后端提供支持的 Backbone 应用程序。我有一个 Invitation 资源，我可以通过向邀请 Controller 的创建操作发送 POST 请求来发送邀请。

我的 Backbone 模型看起来像这样(coffeescript):

class Invitation extends Backbone.Model
  urlRoot: '/invitations'

发送邀请的表单模板如下。我试图让它尽可能接近普通的 rails 形式，因为看起来 Rails 会处理得最好:

<form action="/invitations" accept-charset="UTF-8" id="new_invitation" class="new_invitation" method="post">
  <input id="invitation_recipient_name" class="invitation_recipient_name" type="text" name="invitation[recipient_name]" />
  <input id="invitation_recipient_email" class="invitation_recipient_email" type="text" name="invitation[recipient_email]" />
  <input type="submit" class="btn primary" name="commit" id="invite" value="Send Invitation" />
</form>

这是该模型和模板的主干 View

class InvitationView extends Backbone.View
  # this is the template shown above
  template: JST['backbone/templates/invitation']
  events:
    'click #invite': 'sendInvite'

  render: ->
    $(this.el).html this.template()
    this
  sendInvite: (e) ->
    e.preventDefault()
    name = this.$('#invitation_recipient_name')
    email = this.$('#invitation_recipient_email')
    this.model.save
      recipient_name: name.val()
      recipient_email: email.val()

问题是，当我单击提交按钮并调用 sendInvite 方法时，我的服务器接收到具有以下结构的数据:

Parameters: {"recipient_name"=>"A name", "recipient_email"=>"name@example.com", "invitation"=>{"recipient_email"=>"name@example.com", "recipient_name"=>"A name"}}

现在这确实有效了，因为我的 invitations#create 操作需要使用以下形式的参数:params[:invitations]，这是 rails 的标准。然而，名称和电子邮件在请求中被发送了两次这一事实似乎表明我的设置有问题。

我做错了什么还是正确的？

如果有人想看，这是我的 Controller 操作:

  # POST /invitations
  def create
    @invitation = current_user.sent_invitations.new params[:invitation]

    respond_to do |format|
      if @invitation.save
        format.json { render_for_api :invitation, json: @invitation, status: :created }
      else
        format.json { render json: @invitation.errors, status: :unproccessible_entity }
      end
    end
  end

编辑 如果我设置属性并在保存之前记录它，这就是我的邀请模型的样子:

  Invitation
    _changed: false
    _changing: false
    _escapedAttributes: Object
      __proto__: Object
    _previousAttributes: Object
      recipient_email: "dave@example.com"
      recipient_name: "Dave"
      __proto__: Object
    attributes: Object
      recipient_email: "dave@example.com"
      recipient_name: "Dave"
      __proto__: Object
    cid: "c17"
    __proto__: ctor

日志由以下代码生成:

sendInvite: (e) ->
    e.preventDefault()
    name = @$('#invitation_recipient_name')
    email = @$('#invitation_recipient_email')
    @model.set recipient_name: name.val(), recipient_email: email.val()
    console.log "THe model to save", @model

编辑2
这就是我在路由器中实例化 View 的方式。我应该如何更改它以便 Backbone 自动跟踪我的模型属性，即使我没有从服务器获取和设置它们？

  var TeamRouter = Backbone.Router.extend({
    routes: {
      'members': 'members'
    },

    members: function() {
      @invite = new MoveOutOrg.Models.Invitation();
      @inviteView = new MoveOutOrg.Views.InvitationView({
        model: @invite
      });
      $('#stage').append(@inviteView.render().el);
    }
  });

Answer 1

params[:recipient_name] 和 params[:recipient_email] 字段是您调用 model.save() 的结果。传入的参数是可选的。如果已经使用正确的值创建了模型，则无需传递任何内容来保存。缺少的部分是您如何实例化 View 。

此外，我会将事件更改为 “submit #new_invitation”。它更具描述性。您关心的是提交的表单……而不是他们单击了按钮。它还捕获了他们提交表单而不单击按钮(例如按 enter 键)的情况。

要将 View 链接到模型，请使用initialize 方法。

initialize: ->
  @model.bind('change', @render)

要记住的基本事情是 model 事件通过集合冒泡并传给任何其他监听者。所以现在当你保存时，如果任何属性被更改，一个 change 事件将被触发，这将导致 View 重新呈现。