javascript - 主干同步后 Collection View 中的触发功能

Question

我正在 Backbone 中构建一个应用程序。在我的集合模型中，我有一个同步函数，当用户单击按钮时会触发该函数。它向服务器提交一些表单数据，服务器返回一个包含成功或错误消息的 JSON 对象。

问题是，当集合模型同步时，我似乎无法在 Collection View 中触发事件:

这是完整的脚本:

  var RegisterModel = Backbone.Model.extend({url: 'api/process.php', defaults: { contentType: 'input', value: '', inputType: 'text', inputClass: 'required', serverResponseClass: 'alert alert-error', message: ' ', responseType: ' '} });



var RegisterView = Backbone.View.extend({

    template: _.template('<p><% if (contentType == "input") { %><input placeholder="<%= label %>" name="<%= inputName %>" id="<%= inputName %>" value="<%= value %>" type="<%= inputType %>" class="<%= inputClass %>"/><% } %><% if (contentType == "button") {%> <input type="<%= inputName %>" class="<%= btnClass %>" id="<%= inputName %>"<% } %></p>'),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});




var RegisterCollection = Backbone.Collection.extend({ 
    model: RegisterModel,

    url: 'api/process.php',

    updateModels: function (){
        this.forEach(this.updateModel, this);
    },

    updateModel: function(registerModel) {
        var inputName = '#'+registerModel.get('inputName');
        var userInput = $(inputName).val();
        registerModel.set({value: userInput});
    },
    clearErrors: function() {
        var musketeers = this.where({contentType: "serverResponse"});
        this.remove(musketeers);
    },
    syncCollection: function() {
        Backbone.sync.call(this, 'create', this);
    }
});




var RegisterCollectionView = Backbone.View.extend({
    initialize: function(){
        this.collection.on('reset', this.addAll, this);
        this.collection.on('add', this.addAll, this);
        this.collection.on('sync', this.onModelSaved);

        /* this.collection.on('remove', function(){registerCollection.fetch(); }, this); */
    },
    el: "#backboneContainer",

    events: {
        "click #submit" : "validate",
    },

    validate: function(e) {
        e.preventDefault();
        if ($("#register").valid() === true) {      
            this.collection.clearErrors();
            this.collection.updateModels();
            this.collection.syncCollection();
        }
    },

    errorOverlay: function(errorTitle, errorContent) {  
        $.notification({
            title: errorTitle,
            content: errorContent,
            timeout:    5000,
            icon: "!",
            error: true,
            border: false
        });
    },

    onModelSaved: function () {
        console.log('hello world!');
        alert('hello world!');  
    },

    successMessage: function(message) {
        $.fn.modal({
            layout:     "elastic",
            url:        undefined,
            content:    message,
            padding:    "50px",
            animation:  "fadeInDown"
        });
        this.$el.append('<span class="icon">=</span>');
    },

    addOne: function(registerModel){
        var registerView = new RegisterView({model: registerModel});
        this.$el.append(registerView.render().el);  
    },

    buildForm: function(registerModel) {
        var registerView = new RegisterView({model: registerModel});
        $('#register').append(registerView.render().el);
    },

    addAll: function(){
        this.$el.empty();
        this.$el.append('<div class="con"><div class="section current" title="Our First Section" ><div class="col_12"><h1>Piecharter.com</h1></div><div class="carton col_4"><h2>Registration</h2><div class="content"><form id="register" method="post"></form></div></div></div></div>');
        this.collection.forEach(this.buildForm, this);
        $("#register").validate();
    /*  this.$el.append('); */
    },

    render: function(){
        this.addAll();
        return this;
    }
});



$('.modal').live("click", function () {
    this.remove();
    $('#overlays').hide();
});



/*VALIDATION HERE ~*/

jQuery.validator.addClassRules("username", {
   minlength: 7,
   maxlength: 21
});

jQuery.validator.addMethod("password", function( value, element ) {
    var result = this.optional(element) || value.length >= 1 && /\d/.test(value) && /[a-z]/i.test(value);
    if (!result) {
        var validator = this;
        setTimeout(function() {
            validator.blockFocusCleanup = true;
            element.focus();
            validator.blockFocusCleanup = false;
        }, 1);
    }
    return result;
}, "Your password must be at least 7 characters long and contain at least one number and one character.");

我知道集合已成功同步，因此问题一定出在我在 Collection View 中监听同步事件的方式。有什么想法吗？我查看了文档，发现我的构建方式没有任何问题。

Answer 1

当您尝试绑定(bind)“onModelSaved”时，您遗漏了 this，因此您没有引用对象的“onModelSaved”方法，而是引用了全局“onModelSaved”变量(这几乎肯定不会存在)。

尝试:

this.collection.on('sync', this.onModelSaved);