StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PObackbone model save issue
text
Body
copied!<p>I just started working on backbone a week ago, please don't mind if this question is silly. Alright, here's what I am trying to do.</p> <p>I have a model called Item and a collection called Items. There are two views, one to add the item and the other to list the items. The issue I am having is when I am trying to save the item, it gets saved correctly for the first time. The next time when I add a new item, the item is created successfully, but the previous item added also gets updated with the attributes of the new item. This happens to all the successive items being added.</p> <p>I am guessing that all my models in the collection are being updated OR I need to have my own save method. I actually am not able to figure out what I am doing wrong. I just want to save the model in question with the view, not all the models in the collection. Would really appreciate some pointers.</p> <p>Link to the <a href="http://bbstarter-demo.herokuapp.com/#items/add" rel="nofollow">demo</a>. <br /></p> <h2>Item add/edit view</h2> <pre><code>define([ 'jquery', 'use!underscore', 'use!backbone', 'mustache', 'models/item', 'views/bootstrap', 'text!templates/items/edit.mustache', 'text!templates/items/new.mustache', 'handlebars', 'bootstrap' ], function($, _, Backbone, Mustache, Item, Bootstrap, editTemplate, newTemplate, Handlebars){ var app = new Backbone.Router var ItemEditView = Backbone.View.extend({ el: $('#page'), events: { 'submit #new-item': 'saveItem', 'click .cancel': 'cancelItem' }, initialize: function(options){ if (!this.model.isNew()) { this.model.bind('change', this.render, this) this.model.fetch() } }, render: function(){ var item = this.model.attributes var template = this.model.isNew() ? newTemplate : editTemplate var compiledTemplate = Mustache.render(template, item ) $(this.el).html(compiledTemplate) if (this.model.isNew()) $('#itemName').focus() return this }, /* * Event actions */ saveItem: function(e) { e.preventDefault() var item = { name: $('#itemName').val(), price: $('#itemPrice').val() } var self = this this.model.save(item, { success: function (model, response) { app.navigate('items/'+model.id, {trigger: true, replace: true}) }, error: function (model, response) { new Bootstrap.alert({ el: $('#page') }).render(response, 'error') } }) }, cancelItem: function (e) { if (this.model.isNew()) app.navigate('items', {trigger: true, replace: true}) else app.navigate('items/'+this.model.id, {trigger: true, replace: true}) } }) return ItemEditView }) </code></pre> <h2>Item model</h2> <pre><code>define([ 'use!underscore', 'use!backbone' ], function(_, Backbone) { var Item = Backbone.Model.extend({ urlRoot: 'api/items', idAttribute: '_id' }); return Item; }); </code></pre> <h2>Items collection</h2> <pre><code>define([ 'jquery', 'use!underscore', 'use!backbone', 'models/item' ], function($, _, Backbone, Item){ var Items = Backbone.Collection.extend({ model: Item, url: 'api/items/' }); return Items; }); </code></pre> <p>Link to the <a href="https://github.com/madhums/bbstarter-demo" rel="nofollow">Source code</a> (in case)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload