13

I'm new to backbone and trying to set it up in Sinatra, but I can't seem to get a simple create working.

I've set up my model/collection as so:

var TEAM_ID = window.location.pathname.split('/')[1]; // From url
$(function () {
  var TeamMember = Backbone.Model.extend({
    defaults: {
      name : ""
    }
  });

  var TeamMembers = Backbone.Collection.extend({
    model: TeamMember,
    url: "/" + TEAM_ID + "/team-members.json"
  });

  var teamMembers = new TeamMembers;

  var TeamMemberView = Backbone.View.extend({
    events: { 
      "click #new-team-member-form .submit-button" : "handleNewTeamMember" 
    },
    handleNewTeamMember: function(data) {
      var inputField = $('input[name=new_team_member_name]');
      console.log("Pre create");

      // This doesn't get sent to the server!!
      var teamMember = teamMembers.create({name: inputField.val());

      console.log("Post create");

      return false; // Don't submit form
    }, 
    render: function() {
      console.log("Render team member");

      return this;
    }
  });

  // ...

  var teamMemberView = new TeamMemberView({el: $('#week-view')});

});

The html looks like:

<table id="week-view">
  <!-- ... -->
  <form id="new-team-member-form" action="/some-add-url" method="post">
    <fieldset class="new-object-fieldset" title="New team member">
      <legend>New team member</legend>
      <label for="new_team_member_name">Add new</label>
      <input type="text" name="new_team_member_name" title="Add member" class="new-object-text-box" /> 
      <button type="submit" name="new_team_member" value="new_team_member" class="submit-button">+</button>
      <div id="help-new"></div>
    </fieldset> <!-- New team member -->
  </form>
  <!-- ... -->

and the ruby looks like:

post '/:team_id/team-members.json' do  
  logger.info("Add team member (json): #{params}")
end

However, the sinatra server only shows params[:team_id], without the name parameter on the teamMembers.create line. Am I doing something stupid in backbone? Not initialising something properly?

I've looked at http://documentcloud.github.com/backbone/#Collection-create, http://documentcloud.github.com/backbone/docs/todos.html, http://liquidmedia.ca/blog/2011/01/backbone-js-part-1/, http://liquidmedia.ca/blog/2011/01/an-intro-to-backbone-js-part-2-controllers-and-views/ and https://gist.github.com/1655019, but I can't seem to find any answers there. I feel like I've done something stupid, but just can't see it!

2 Answers 2

15
+50

It turns out, it was me not knowing how to extract json parameters in sinatra properly. From this site: http://mini.softwareas.com/posting-json-to-a-sinatra-mongodb-service, I found out I had to use request.body.read.to_s instead of the params hash ie,

post '/:team_id/team-members.json' do  
  request_body = JSON.parse(request.body.read.to_s)
  team_member_name = request_body["name"]
  # ...
end
4

I had the same problem. I am on PHP, though. Since Backbone sends POST data not in a query string, but rather in a plain JSON string, the data is not available thru $_POST. To read the Backbone POST data:

// the 'true' param returns an array rather than an object
$post = json_decode(file_get_contents('php://input'), true);

You can also read it directly from $HTTP_RAW_POST_DATA.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.