10693

Backbone: bind event happen multiple times

I make a simple todo app:

var Todo = Backbone.Model.extend({ }); var Todos = Backbone.Collection.extend({ model: Todo }); var todos = new Todos(); var ItemView = Backbone.View.extend({ tagName: "li", template: _.template($("#item-template").html()), render: function () { this.$el.html(this.template(this.model.toJSON())); return this; }, initialize: function () { this.listenTo(todos, 'remove', this.remove); }, events: { "click .delete": "clear" }, clear: function () { todos.remove(this.model); } }); var AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.listenTo(todos, 'add', this.addOne); }, addOne: function(todo) { var view = new ItemView({ model: todo }); this.$("#list").append(view.render().el); }, events: { "click #create": "create" }, create: function () { var model = new Todo({ title: this.$("#input").val() }); todos.add(model); } }) var app = new AppView();

and DEMO online is here: http://jsfiddle.net/JPL94/1/

I can add item correctly, but when I want delete some item, all of them been removed;

I found it related to the bind event in ItemView, when I click one delete button, all of them are triggered.

But how can I solve this problem?

Answer1:

You are listening to remove events from the collection, and if my memory serves me right a collection will dispatch a remove event whenever a model is removed, so when you remove a model from the collection, all the views will see the event.

I changed your initialize in the view to

initialize: function () { this.listenTo(this.model, 'remove', this.remove); },

And it seems to work.

http://jsfiddle.net/JPL94/5/

Recommend

  • How to organize Backbone collection with a specific selection?
  • How convert a POJO into a readable string on Android for debugging?
  • Angular/Ionic handling successful 200 as an error
  • JITSU FAILED TO INSTALL OSX [node 0.8.17 and NPM 1.2.0] WTF
  • finding symmetric difference/unique elements in multiple arrays in javascript
  • Matrix problem Python
  • Grouping vars in function
  • Click button with javascript
  • Using an STL Iterator without initialising it
  • Unix Network Programming Clarification
  • Google map in top corner left
  • Undefined navigator.push React-native 0.43.4
  • redirect_to root_url and return unless @user.activated
  • Django invalid literal for int() with base 10
  • Assign variable to the value in HTML
  • Android activity accessing service's static reference before the service is ready
  • How to use carriage return with multiple line?
  • Adding a button at the bottom of a table view
  • Getting last autonumber in access
  • Align navbar back button on right side
  • Can Jackson SerializationFeature be overridden per field or class?
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • Modifying destination and filename of gulp-svg-sprite
  • Perl system calls when running as another user using sudo
  • Delete MySQLi record without showing the id in the URL
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • JaxB to read class hierarchy
  • Django query for large number of relationships
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Net Present Value in Excel for Grouped Recurring CF
  • How to push additional view controllers onto NavigationController but keep the TabBar?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?