Backbone.LayoutManager 委托视图事件

Question

我一直在使用 Backbone.LayoutManager 开发一个原型 Backbone 应用程序，但我遇到了一些我不理解的东西。

场景是我有一个用于将“人”{firstname, lastname} 添加到列表视图的表单，我很好地保存了模型并且新项目显示在列表中。我还有一个在页面刷新后可以使用的删除函数，但是如果我尝试删除我刚刚创建的人而不刷新页面，则永远不会调用 removeUser() 函数。

我的代码如下。有人可以帮我吗？我只是想学习 Backbone，如果你有这个问题的答案以及任何其他批评，我将不胜感激。谢谢。

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

问题原来是服务器的响应不正确。一旦服务器发回正确的 JSON 对象，一切正常。