Главная

ASP.NET MVC Framework и проверка достоверности на стороне клиента для Backbone.js

2013-04-18 в 15:25, admin, рубрики: .net, backbone.js, javascript, mvc framework, validation, Песочница, метки: backbone.js, javascript, mvc framework, validation

При разработке веб приложений, мы используем Asp.net MVC и backbone.js. При написании логики проверки достоверности у нас возникла проблема дублирования кода. Логику приходится описывать в модели на сервере и в модели backbone на клиенте. Хотелось бы автоматически перенести правила валиции с сервера на клиент. Для решения этой проблемы мы реализовали аналог стандартной ненавязчивой проверки достоверности данных MVC для backbone.js Подробности ниже.

Введение

В последнее время пользователи в веб-приложениях обычно ожидают немедленного отклика проверки – без необходимости отправлять что-либо серверу. Это называется проверкой достоверности на стороне клиента. Платформа MVC Framework поддерживает ненавязчивую проверку достоверности данных на стороне клиента. Термин «ненавязчивая» означает, что правила проверки выражены с использованием атрибутов, которые добавляются к сгенерированным HTML-элементам. Они интерпретируются библиотекой JavaScript(jquery.validatate.unbtrusive.js), входящей в состав MVC Framework, которая применяет значение атрибутов для конфигурации библиотеки jQuery Validation, выполняющей всю работу по проверке достоверности.

Хотелось бы использовать похожий подход к проверке достоверности данных, если на стороне клиента используется Backbone.js. В этой статье рассматривается реализация данного подхода.

Более подробно про встроенную в MVC проверку достоверности на стороне клиента можно посмотреть тут:

Реализация

Необходимо написать свой адаптер, который будет интерпретировать атрибуты, добавленные к сгенерированным HTML-элементам для конфигурации библиотеки Backbone.Validation, которая будет выполнять всю работу по проверки достоверности.

Backbone предоставляет лишь точку в которой мы можем описать свою логику валидации. Для описания нашей логики валидации мы используем Backbone.Validation. Данная библиотека позволяет задавать простые правила валидации следующим образом.

var SomeModel = Backbone.Model.extend({
  validation: {
    name: {
      required: true,
      msg: 'Please enter Name
    }
  }
});

Более подробно про библиотеку Backbone.Validation можно почитать тут:

Backbone.Validation

Идея нашего подхода заключается в считывании правил из атрибутов и создания правил валидации для Backbone.Validation.

Точка внедрения Backbone.validation в наш код — это вызов метода Backbone.Validation.bind(view) внутри view:

var SomeView = Backbone.View.extend({
  initialize: function(){
    Backbone.Validation.bind(this);
  }
});

Поэтому код преобразования атрибутов в правила мы разместим именно в нем путем замены его своей оберткой.

    Backbone.Validation.bind = _.wrap(Backbone.Validation.bind, function (bind, view, options) {
        if (options.autoValidation) {
            var validation = {}; // список правил для каждого атрибута 
            view.$("[data-val=true]").each(function (item, selector) {
                var data = $(this).data();
                var options = Backbone.Validation.adapters._create(data);
                if (options)
                    validation[data.valAttr || this.name] = options;
            });

            if (view.model && !_.isEmpty(validation))
                view.model.validation = validation;
        }

        return bind(view, options);
    });

В нашей обертке мы использовали Backbone.Validation.adapters. Этот объект состоит из списка адаптеров каждого атрибута и центральный метод _create вызывающий адаптеры для всех атрибутов элемента. Его сокращенный код приведен ниже.

        Backbone.Validation.adapters = {
            valRequired: function (data) {
                return {
                    required: true,
                    msg: data.valRequired
                };
            },
            valLength: function (data) {
                return {
                    rangeLength: [data.valLengthMin, data.valLengthMax],
                    msg: data.valLength
                };
            },
// создает список правил для одного элемента 
            _create: function (data) {  
                var options = [];
                for (var p in data)
                    if (this[p])
                        options.push(this[p](data));
                return options.length ? options : undefined;
            },
        };

Теперь если мы хотим, чтобы правила проверки достоверности считывались нам необходимо добавить параметр autoValidation: true, в вызов метода bind как показа ниже:

Backbone.Validation.bind(this, {autoValidation: true});

Резюме

В данной статье описан подход к проверке достоверности данных, если на стороне клиента используется Backbone.js. Мы избежали дублирования логики и кода на клиентской и серверной стороне. Был использован стандартный подход MVC к клиентской проверке данных.

Автор: Puteg

Источник