Question

I’ve been working on a prototype Backbone application using Backbone.LayoutManager and I’m running into something I don’t understand.

The scenario is that I have a form for adding “people” {firstname, lastname} to a list view, I save the model fine and the new item shows up in the list. I also have a remove function that works when after the page is refreshed, but if I try to delete the person I just created without a page refresh, the removeUser() function never gets called.

My code is below. Can someone help me out? I’m just trying to learn Backbone and if you have the answer to this question as well as any other criticisms, I’d be grateful. Thanks.

define([
    // Global application context.
    "app",

    // Third-party libraries.
    "backbone"
],

function (app, Backbone) {
    var User = app.module();

    User.Model = Backbone.Model.extend({
        defaults : {
            firstName: "",
            lastName: ""
        }
    });

    User.Collection = Backbone.Collection.extend({
        model: User.Model,
        cache: true,
        url: "/rest/user"
    });

    User.Views.EmptyList = Backbone.View.extend({
        template: "users/empty-list",
        className: "table-data-no-content",
        render: function (manage) {
            return manage(this).render().then(function () {
                this
                    .$el
                    .insertAfter(".table-data-header")
                    .hide()
                    .slideDown();
            });
        }
    });

    User.Views.Item = Backbone.View.extend({
        template: "users/user",
        tagName: "ul",
        className: "table-data-row"
        events: {
            "click .remove": "removeUser"
        },
        removeUser: function () {
            console.log(this.model);
            this.model.destroy();
            this.collection.remove(this.model);
            this.$el.slideUp();
            if (this.collection.length === 0) {
              this.insertView(new User.Views.EmptyList).render();
            }
        }
    });

    User.Views.List = Backbone.View.extend({
        initialize: function () {
            this.collection.on("change", this.render, this);
        },
        render: function (manage) {
            if (this.collection.length > 0) {
                jQuery(".table-data-no-content").slideUp("fast", function() {
                    $(this).remove();
                });
                this.collection.each(function(model) {
                    this.insertView(new User.Views.Item({
                      model: model,
                      collection: this.collection,
                      serialize: model.toJSON()
                    }));
                }, this);
            } else {
                this.insertView(new User.Views.EmptyList());
            }

            // You still must return this view to render, works identical to
            // existing functionality.
            return manage(this).render();
          }
    });

    User.Views.AddUser = Backbone.View.extend({
        template: "users/add-user",
        events: {
            "click input#saveUser": "saveUser"
        },
        render: function (manage) {
            return manage(this).render().then(function () {
                $("input[type='text']")
                     .clearField()
                     .eq(0)
                     .focus();
            });
        },
        saveUser: function () {
            var user = new User.Model({
                firstName: $(".first-name").val(),
                lastName: $(".last-name").val()
            });

            this.collection.create(user);

            this
                .$("input[type='text']")
                .val("")
                .clearField("refresh")
                .removeAttr("style")
                .eq(0)
                .focus();
        }
    });

    return User;

});

Answer 1

The problem turned out to be an incorrect response from the server. Once the server sent back the correct JSON object, everything worked correctly.