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

您可以使用 "View" 本身负责处理表单中错误的显示，因为它可以访问 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 以便能够在其他视图中重用逻辑，例如：

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")); 
   }
   ...

希望这可以指导您解决问题。

Marionette js 3+：验证失败的情况谁来处理？

Marionette js 3+: whose responsibility to handle the situation when the validation failed?

backbone.js

marionette