Question

I have an Appointment model, each instance of which has a Client. Here’s my template for editing an appointment:

<form id="edit-appointment" name="appointment" class="mobile_friendly">
  <div class="field">
    <input type="text" name="start_time_ymd" id="start_time_ymd" value="<%= start_time_ymd %>" placeholder="Start Date">
    <input type="text" name="start_time_time" id="start_time_time" value="<%= start_time_time %>" placeholder="Start Time">
  </div>

  <div class="field">
    <input type="text" name="client_name" id="client_name" value="<%= client.name %>" placeholder="Client">
    <input type="hidden" name="client_id" id="client_id" value="<%= client.id %>" placeholder="Client ID">
  </div>

  <div class="field">
    <input type="text" name="client_phone" id="client_phone" value="<%= client.phone %>" placeholder="Phone">
  </div>

  <div class="field">
    <input type="text" name="notes" id="notes" value="<%= notes %>" placeholder="Notes">
  </div>

  <div class="actions">
    <input type="submit" value="Update Appointment" />
  </div>

</form>

<a href="#/index/<%= stylist_id %>">Back</a>

My problem is that my Client attributes aren’t being passed to the server correctly. The JSON object that gets passed to the server on save looks something like the following. Let’s pretend I have a client with phone number 555-555-5555 but I change it to 555-555-1234 and then submit the form:

{"appointment":
  {"start_time_ymd":"1/1/2000",
   "client_phone":"555-555-1234",
   "client":{"phone":"555-555-5555"}}

I’ve omitted a lot of irrelevant fields, but hopefully you see what I mean. I’ve changed client_phone from 555-555-5555 to 555-555-1234, but the client object in the JSON object has its phone number unchanged. I need to somehow change that phone number.

How do I make these fields – like the phone number field – actually “take” so they get passed to the server as part of the client object under appointment and not directly under appointment? I’m using Backbone-relational, if that makes a difference.

Answer 1

I was able to get it to work like this:

class Snip.Views.Appointments.EditView extends Backbone.View
  template : JST["backbone/templates/appointments/edit"]

  events :
    "submit #edit-appointment" : "update"

  update : (e) ->
    e.preventDefault()
    e.stopPropagation()

    # THE ONLY CHANGE I MADE WAS TO ADD THIS LINE
    @model.attributes.client.phone = $("#client_phone").val()

    @model.save(null,
      success : (appointment) =>
        @model = appointment
        window.location.hash = "/#index/" + @model.attributes.stylist_id
    )