Backbone - 我的模型总是保持一个id而不是帖子

时间:2013-08-14 09:31:40

标签: backbone.js

对不起我的头衔,这可能不相关。我会尝试在这篇文章中更好地解释:) 我理解我的问题并且找到了解决方案,但我不是这样做的好方法,所以我想要一些建议。

我的工作流程:

  • 我有一个表单,用户可以在其中输入ID。
  • 我点击提交时进行验证(空字段等)并调用API。
  • 如果id存在,我在我的数据库中注册所有信息并发送带有用户对象的响应(Symfony2 + fosRestBunble)

我的问题: 当我第一次在表单上单击时,它运行良好并且创建了一个新用户。但是当我尝试注册第二个用户时,他发出了一个PUT请求,因为id发送了前一个用户对象。

我理解为什么当我看到我的代码时,因为我在我的视图的intialize函数中初始化我的用户模型。 (在它之外)

以下是我的观点:

define(['backbone',
    'views/notification/form',
    'models/form',
    'text!templates/user-form.tpl'],
function(Backbone,
        NotificationForm,
        User,
        FormTpl) {

    var UserForm = Backbone.View.extend({
        el: "#user-form",

        template: _.template(FormTpl),

        initialize: function() {
            this.model = new User();
            this.model.on("invalid",this.showErrors, this);
            this.model.on('request',this.ajaxStart, this);
            this.model.on('sync',this.ajaxComplete, this);
        },

        events: {
            submit: 'register'
        },

        render: function() {
            this.$el.html(this.template());
        },

        register: function(e) {
            e.preventDefault();
            var attrs = {
                counter: 0,
                created: new Date(),
                updated: new Date(),
                stackexchangeId: $('#stackId').val(),
                site: $('#site').find(":selected").text()
            };

            var self = this;
            this.model.save(attrs,
                {
                    wait:true,
                    success: function(model, response) {
                        console.log('success ajax');
                        console.log(model);
                        console.log(response);
                        self.collection.add(model);
                        //self.collection.add(new User(response));
                        var form = { id:'#user', messages: 'User has been registered' };
                        var success = new NotificationForm({ type: 'success', form: form} );
                        success.closeSuccessNotification();
                    },
                    error: function(model, xhr, options) {
                        self.ajaxComplete();
                        if(xhr.status == '500') {
                             var form = { id:'#user', messages: 'Connection StackExchange                  API failed' };
                        } else {
                            var response = JSON.parse(xhr.responseText);
                            var form = { id:'#user', messages: response.users };
                        }
                        new NotificationForm({ type: 'warning', form: form} );
                    }
                }
            );
        },

        showErrors: function(errors) {
            var form = { id:'#user', messages: errors.validationError };
            new NotificationForm({ type: 'error', form: form} );
        },

        ajaxStart: function() {
            this.$('#spinner-register').addClass('spinner-anim');
        },

        ajaxComplete: function() {
            this.$('#spinner-register').removeClass('spinner-anim');
        }
    });

return UserForm;

因此,当我再次点击时,我的模型是相同的,而且ID在这里。

我找到了一个解决方案,但我不是一个很好的解决方案,因为我必须从初始化函数中移动我的事件。 所以我创建了:

test: function(model) {
            model.on("invalid",this.showErrors, this);
            model.on('request',this.ajaxStart, this);
            model.on('sync',this.ajaxComplete, this);
        },

并在注册表中我做到了:

register: function(e) {
            this.model = new User();
            this.test(this.model);
            e.preventDefault();
   etc.
 }

它工作正常,但我完全删除了初始化函数,听起来不是很好。我想像我的第一个例子一样保持初始化,并始终拥有一个新的用户模型。 谢谢:))

1 个答案:

答案 0 :(得分:1)

您可以使用model.clear()使模型像新的一样新鲜,然后在save()上发送POST请求。

...
this.model.clear();
this.model.save(attrs,
...