Backbone.LayoutManager委托查看事件

时间:2012-07-19 22:15:49

标签: backbone.js

我一直在使用Backbone.LayoutManager开发Backbone应用程序原型,而且我遇到了一些我不理解的事情。

方案是我有一个表单,用于将“people”{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;

});

1 个答案:

答案 0 :(得分:0)

问题原来是来自服务器的错误响应。一旦服务器发回了正确的JSON对象,一切都正常工作。