При разработке веб приложений, мы используем 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. Данная библиотека позволяет задавать простые правила валидации следующим образом.
Более подробно про библиотеку Backbone.Validation можно почитать тут:
Идея нашего подхода заключается в считывании правил из атрибутов и создания правил валидации для Backbone.Validation.
Точка внедрения Backbone.validation в наш код — это вызов метода Backbone.Validation.bind(view) внутри view:
Поэтому код преобразования атрибутов в правила мы разместим именно в нем путем замены его своей оберткой.
В нашей обертке мы использовали Backbone.Validation.adapters. Этот объект состоит из списка адаптеров каждого атрибута и центральный метод _create вызывающий адаптеры для всех атрибутов элемента. Его сокращенный код приведен ниже.
Теперь если мы хотим, чтобы правила проверки достоверности считывались нам необходимо добавить параметр autoValidation: true, в вызов метода bind как показа ниже:
В данной статье описан подход к проверке достоверности данных, если на стороне клиента используется Backbone.js. Мы избежали дублирования логики и кода на клиентской и серверной стороне. Был использован стандартный подход MVC к клиентской проверке данных.
Введение
В последнее время пользователи в веб-приложениях обычно ожидают немедленного отклика проверки – без необходимости отправлять что-либо серверу. Это называется проверкой достоверности на стороне клиента. Платформа MVC Framework поддерживает ненавязчивую проверку достоверности данных на стороне клиента. Термин «ненавязчивая» означает, что правила проверки выражены с использованием атрибутов, которые добавляются к сгенерированным HTML-элементам. Они интерпретируются библиотекой JavaScript(jquery.validatate.unbtrusive.js), входящей в состав MVC Framework, которая применяет значение атрибутов для конфигурации библиотеки jQuery Validation, выполняющей всю работу по проверке достоверности.
Хотелось бы использовать похожий подход к проверке достоверности данных, если на стороне клиента используется Backbone.js. В этой статье рассматривается реализация данного подхода.
Более подробно про встроенную в MVC проверку достоверности на стороне клиента можно посмотреть тут:
- Ненавязчивый JavaScript в ASP.NET MVC 3
- Проверка данных на стороне клиента
- ASP.NET MVC 3 Framework с примерами на c# для профессионалов
Реализация
Необходимо написать свой адаптер, который будет интерпретировать атрибуты, добавленные к сгенерированным 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.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 к клиентской проверке данных.