Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Backbone.js create method not sending parameters to sinatra

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!

like image 863
zlog Avatar asked Feb 03 '12 18:02

zlog


2 Answers

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
like image 108
zlog Avatar answered Dec 01 '22 01:12

zlog


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.

like image 31
gerard Avatar answered Nov 30 '22 23:11

gerard