- PVSM.RU - https://www.pvsm.ru -
При разработке веб приложений, мы используем 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.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
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/32467
Ссылки в тексте:
[1] Ненавязчивый JavaScript в ASP.NET MVC 3: http://andrey.moveax.ru/post/mvc3-in-depth-part11-clientside-validation-and-unobtrusive-javascript.aspx
[2] Проверка данных на стороне клиента: http://andrey.moveax.ru/post/mvc3-in-depth-part12-custom-clientside-validation.aspx
[3] ASP.NET MVC 3 Framework с примерами на c# для профессионалов: https://www.google.ru/search?q=asp.net+mvc+3+framework+%D1%81+%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B0%D0%BC%D0%B8+%D0%BD%D0%B0+c%23+%D0%B4%D0%BB%D1%8F+%D0%BF%D1%80%D0%BE%D1%84%D0%B5%D1%81%D1%81%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D0%BE%D0%B2&aq=0&oq=asp.net+mvc+3+fra&aqs=chrome.1.57j0l3j62l2.18017j0&sourceid=chrome&ie=UTF-8
[4] Backbone.Validation: https://github.com/thedersen/backbone.validation
[5] Источник: http://habrahabr.ru/post/177219/
Нажмите здесь для печати.