백본 콜렉션 저장 오류

Question

백본 콜렉션이 저장 중일 때 오류가 발생하면 그 콜렉션과 함게 할 수 있도록하려고합니다. 그러나 양식을 저장하면 모든 작업 렌더링 버튼의 클릭 이벤트가 항상 실행됩니다. 오류가 발견되면 컬렉션 반복을 중지하려면 어떻게합니까? 그렇지 않으면 fail 함수를 호출하기 위해 어떻게해야합니까?

var EditTaskView = AddTaskView.extend({ 
    template: _.template($("#individualTaskEditView").html()), 
    events: { 

      "submit": function (e) { 
       e.preventDefault(); 

       if (this.model.isValid(true) && this.ScheduleView.isValid() && this.ProviderView.isValid()) { 
        $.when(this.model.save(), this.FiltersView.saveAll()) 
         .done(function() { 
          $("#RenderAllTasks").trigger("click"); 
         }) 
        .fail(function (xhr, status, errorMessage) { 
         var message = JSON.parse(xhr.responseText).Message; 
         RenderError(message, "#EditTaskDetailsTabError"); 
        }); 
       } 
      } 

     } 
}; 

var FieldCollectionAddView = Backbone.View.extend({ 
    tagName: "div", 
    render: function() { 
     // iterate the collection 
     this.collection.each(function (field) { 
      // render the view and append to the collection 
      var view = new FieldAddView({ model: field }); 
      var rendered = view.render(); 
      this.$el.append(rendered.el); 
     }, this); 
     return this; 
    }, 
    isValid: function() { 
     var valid = true; 
     _.each(this.collection.models, function (model) { 
      if (!model.isValid(true)) { 
       valid = false; 
      } 
     }); 
     return valid; 
    }, 
    saveAll: function() { 
     var errorsFound = false; 
     _.each(this.collection.models, function (model) { 
      model.save(null, { 
       error: function (error) { 
        //TODO: do soemthing with the error 
        var message = JSON.parse(el.responseText).Message; 
        RenderError(message, "#ProviderDetailsTabError"); 
       } 
      }, { wait: true }); 
     }); 
     return errorsFound; 
    } 
}); 

var ProviderAddView = Backbone.View.extend({ 
    tagName: "div", 
    template: _.template($("#providerAddTemplate").html()), 
    render: function() { 
     // append the template to the element 
     this.$el.append(this.template); 
     //render provider types 
     this.ProviderTypes = RenderProviderTypes(this.model.attributes.ProviderTypes); 

     var providerTypesDiv = _.template($("#ProviderTypesTemplate").html()); 

     $("#ProviderTypesDiv", this.$el).html(providerTypesDiv); 
     $("#ProviderTypesSelectDiv", this.$el).html(this.ProviderTypes.render().el); 
     $("#ProviderTypes", this.$el).val(this.model.attributes.ProviderType); 

     // render field collection 
     var collection = new FieldCollection(this.model.attributes.ProviderFieldList); 
     var fieldsView = new FieldCollectionAddView({ 
      collection: collection 
     }); 
     this.FieldsAddView = fieldsView; 
     // append the fields to the element 
     $("#fieldsDiv", this.$el).append(fieldsView.render().el); 


     this.stickit(); 
     return this; 
    }, 
    events: { 
     "submit #NewProviderForm": function (e) { 
      e.preventDefault(); 
      if (this.FieldsAddView.isValid()) { 
       var fieldsView = this.FieldsAddView; 
       this.model.save(null, {}, { wait: true }) 
        .success(function (result) { 
         var filters = new FilterCollection(); 
         $.when(fieldsView.saveAll(), 
          filters.fetch({ 
           data: $.param({ 
            taskId: result.attributes.TaskId 
           }) 
          })) 
          .done(function() { 
           if (!$("#FiltersForm").html()) { 
            var view = new FilterCollectionView({ collection: filters }); 
            assign(view, "#FilterDetails"); 
            $("#FiltersForm").append(buttonsTemplate); 

            $("#FilterDetailsTab").parent("li").removeClass("disabled"); 
            $("#FilterDetailsTab").attr("data-toggle", "tab"); 
           } 
           $("#FilterDetailsTab").tab("show"); 
          }); 
         }) 
         .error(function (xhr, el, other) { 
          var message = JSON.parse(el.responseText).Message; 
          RenderError(message, "#ProviderDetailsTabError"); 
         }); 
        } 
       } 
     }, 
     isValid: function() { 
      return this.model.isValid(true) && this.FieldsAddView.isValid(); 
     }, 
     save: function() { 
      this.model.save(); 
      this.FieldsAddView.saveAll(); 
     } 

    }); 

Answer 1

그래, 어떻게해야하는지 알았어. 간단히 말해 코드를 반복하여 각 모델을 개별적으로 저장하는 대신 Backbone.sync를 사용하여 전체 컬렉션을 한 번에 동기화하도록 코드를 변경해야했습니다. 또한 컬렉션을 저장할 준비가되면 $ .when 함수를 사용하여 수행 할 작업을 결정하기 전에 전체 동기화를 완료합니다. 아래 변경 사항을 보여주는 관련 코드입니다.

var FieldCollection = Backbone.Collection.extend({ 
    url: "/api/Field", 
    model: FieldModel, 
    syncAll: function() { 
     return Backbone.sync("create", this) 
      .error(function (xhr, el, other) { 
       var message = JSON.parse(xhr.responseText).Message; 
       var tab = ""; 
       var activeTab = $("#Tabs li.active a").attr("id"); 
       if (activeTab === "TaskListTab") { 
        tab = "#EditTaskDetailsTabError"; 
       } 
       else if (activeTab === "NewTaskTab") { 
        tab = "#ProviderDetailsTabError"; 
       } 
       RenderError(message, tab); 
      }); 
    } 
}); 

var FieldCollectionAddView = Backbone.View.extend({ 
    saveAll: function() { 
     return this.collection.syncAll(); 
    } 
}); 

var ProviderAddView = Backbone.View.extend({ 
    events: { 
     "submit #NewProviderForm": function (e) { 
      e.preventDefault(); 
      if (this.FieldsAddView.isValid()) { 
       var fieldsView = this.FieldsAddView; 
         $.when(fieldsView.saveAll()) 
          .done(function() { 
           // success 
          }); 
        } 

      } 

    } 
});