🥄 🕶️ 🧝🏾 ASP.NET MVCとBackbone.jsによる控えめな検証 👨🏿‍🔧 🔩 🥇

Webアプリケーションを開発する場合、Asp.net MVCおよびbackbone.jsを使用します。検証ロジックを作成するとき、コードの重複の問題がありました。ロジックは、サーバー上のモデルとクライアント上のバックボーンモデルで記述する必要があります。検証ルールをサーバーからクライアントに自動的に転送したいと思います。この問題を解決するために、backbone.jsの標準的な控えめなMVCデータ検証に類似したものを実装しました。詳細は以下のとおりです。

はじめに

最近、Webアプリケーションのユーザーは通常、サーバーに何も送信せずに、チェックからの即時応答を期待しています。これは、クライアント側の検証と呼ばれます。 MVCフレームワークは、控えめなクライアント側の検証をサポートしています。「邪魔にならない」という用語は、生成されたHTML要素に追加される属性を使用して検証ルールが表現されることを意味します。これらは、MVCフレームワークの一部であるJavaScriptライブラリ（jquery.validatate.unbtrusive.js）によって解釈されます。MVCフレームワークは、すべての検証作業を行うjQuery検証ライブラリ構成に属性値を適用します。

Backbone.jsがクライアント側で使用される場合、データ検証に同様のアプローチを使用したいと思います。この記事では、このアプローチの実装について説明します。

MVCに組み込まれたクライアント側の検証の詳細については、次を参照してください。

実装

独自のアダプターを作成する必要があります。アダプターは、Backbone.Validationライブラリーの構成用に生成されたHTML要素に追加された属性を解釈し、すべての検証作業を行います。

バックボーンは、検証ロジックを説明できるポイントのみを提供します。検証ロジックを説明するには、Backbone.Validationを使用します。このライブラリを使用すると、次のように簡単な検証ルールを設定できます。

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

Backbone.Validationライブラリの詳細については、こちらをご覧ください。

Backbone.validation

このアプローチの背後にある考え方は、属性からルールを読み取り、Backbone.Validationの検証ルールを作成することです。

コードにBackbone.validationを埋め込むポイントは、view内でBackbone.Validation.bind（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パラメーターをバインドメソッド呼び出しに追加する必要があります。

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

まとめ

この記事では、クライアント側でBackbone.jsが使用されている場合のデータ検証のアプローチについて説明します。クライアント側とサーバー側でのロジックとコードの重複を避けました。クライアントデータ検証に対する標準のMVCアプローチが使用されました。

ASP.NET MVCとBackbone.jsによる控えめな検証

はじめに

実装

まとめ

More articles: