Backbone is interpolating query string in model URL. How do I stop it?

Question

I have a Backbone model that looks like this

...

  var Address = Backbone.Model.extend({
      urlRoot: '/address/'
  });

  return { address: Address }

});

I have a template that prints out an address in a form. The template is rendered by a view that is passed an address id in it's 'render' function. The view is reached by a route like this 'address/:id'.

The view looks like this:

var AddressView = Backbone.View.extend({
      el: $('#myclass'),

      render: function(options) {
        var that = this;

        var addr = new A.address({id: options.aid});

        addr.fetch({
            reset: true,
            success: function(address) {
              var template = _.template(ATemplate, {address: address});
              that.$el.html(template);
            }
        });

        return this;
      },

      events: {
        'submit .edit-address-form': 'editAddress'
      },

      editAddress: function(ev) {

        //serializeObject creates JSON object from form data
        var addressDetails = $(ev.currentTarget).serializeObject();

        addr.save(addressDetails, function(addr) {
            R.router.navigate('', {trigger: true});
        });
        return false;
      }
    });
  return {
      addressView: new AddressView()
  };

});

There are two problems. The first problem is that the 'editAddress' function is never getting called, even though the class name is correct and the button type = is 'submit'.

The second problem is when I submit the address form the URL is garbled, a query string is interpolated between the base URL and /#/address, as in

http:///ldmanclient/address=2500+Moffitt+Library&address2=University+of+California%2C+Berkeley&city=Berkeley&zipcode=94720&mailcode=6000&aid=1#/address/1

Has anyone seen this type of behavior before? What am I doing wrong?

David Sulc David Sulc · Accepted Answer · 2014-02-28T07:39:13

As mu said, the form is being submitted the standard way before Backbone gets to it. Try preventing the submit action:

  editAddress: function(ev) {
    ev.preventDefault();

    // same code as above
  }

Backbone is interpolating query string in model URL. How do I stop it?

1 Answers