Marionette js 3+: чья ответственность за обработку ситуации, когда проверка не прошла?

Question

Существует вид регистрационной формы. Когда кто-то положил данные и нажал кнопку регистрации: создала модель и после model.save() начала проверку.

Идея: если проверка не удалась, образуют знак входа в has-error

Мой код: вид

class App.Views.RegisterView extends Marionette.View 
    template: _.template(App.Templates['regFormTpl.ejs']) 
    ui: 
     registrate: '#reg-button' 

    events: 
     'click @ui.registrate': 'customerRegistration' 

    customerRegistration: (e) -> 
     e.preventDefault() 

     regData = new App.Models.RegData 
      login: $('#login').val() 
      email: $('#email').val() 
      password: $('#password').val() 
      confirmPassword: $('#password_confirm').val() 


     if regData.save() 
      console.log ('done') 
     else 
      console.log ('false') 

модель

class App.Models.RegData extends Backbone.Model 
    urlRoot: '/someurl' 

    defaults: 
     login: '' 
     email: '' 
     password: '' 
     confirmPassword: '' 

    validate: (attrs) -> 
     console.log(attrs) 

     errors = {} 

     if attrs.login.length < 5 
      errors.username = 'error desc' 

     if attrs.password != attrs.confirmPassword 
      errors.password = 'error desc' 

     unless _.isEmpty(errors) 
      return errors 

У меня есть сомнения о том, чья ответственность в обрабатывать ситуация, когда неудачная проверка

У меня нет опыта в разработке этой структуры. Когда я читал путеводители ... раньше это был контроллер, который запускал Событие, которое слушали по виду.

Контроллер Mn 3+ удален.

Answer 1

Вы можете использовать свой «вид» как ответственный, чтобы обрабатывать отображение ошибок в форме, так как это имеет доступ к элементам DOM.

В этом примере требуется указать «id» полей в вашей форме и в совпадениях с картами ошибок.

customerRegistration: (e) -> 
    ... 
    // remove previous errors 
    this.cleanFormErrors(); 

    if (!regData.isValid()) { 
    _.each(regData.validationError, fieldName => this.showFormError(fieldName)); 
    } 
    ... 
showFormError: (fieldId) -> 
    this.$el('[#' + fieldId + ']').addClass('has-error'); 

cleanFormErrors:() -> 
    this.$el.find('.has-error').removeClass('has-error'); 

В конце концов эти два метода могут быть делегированы Marionette.Behavior, чтобы иметь возможность повторно использовать логику в других Views, как:

class App.Behaviors.DisplayErrors extends Marionette.Behavior 
    onShowFormError: (fieldId) -> 
    this.$el('[#' + fieldId + ']').addClass('has-error'); 

    onCleanFormErrors:() -> 
    this.$el.find('.has-error').removeClass('has-error'); 

Вот модифицированный Просмотр кода с использованием поведения:

class App.Views.RegisterView extends Marionette.View 
    behaviors: { 
    'errorsBehavior': { 
     'behaviorClass': App.Behaviors.DisplayErrors 
    } 
    } 
    customerRegistration: (e) -> 
    ... 
    this.triggerMethod('clean:form:errors'); 
    if (!regData.isValid()) { 
    _.each(regData.validationError, fieldName => this.triggerMethod("show:form:errors")); 
    } 
    ... 

Надеюсь, это поможет вам решить ваш вопрос.