クライアントとサーバーという 2 つの別個の部分が存在する Web アプリケーション開発では、コードとプレゼンテーションを分離するという大原則が問題を引き起こす状況に陥りました。トリックなしで、両端で同時にこの原則を守る方法がわかりません。
サーバー側のテンプレートを使用してクライアント側の Web ページ ( ) を生成する例を考えてみましょう。この Web ページviewは、サーバー側のmodelパラメーターを認識して、サーバーに送り返すことができるようにする必要があります。たとえば、次のようになります。
<!-- File: form.template -->
<form id="main" name="main">
<input type="button" id="do" class="buttons" value="Do" onclick="requestDoFor(%modelid%)"/>
</form>
このようなテンプレートは、サーバー上でコードから適切に分離して使用されます (たとえば、php では、抽象テンプレート エンジンを使用します)。
$templateEngine->create('form.template', array('modelid' => $value))->render();
問題は、テンプレートがクライアント側のコード分離の原則に準拠していないことです。生成されたビューは、実際には JavaScript から解放されている必要があります。つまり、onclickハンドラーはテンプレートから移動する必要があります。
<input type="submit" id="do" class="buttons" value="Do" />
別の JavaScript ファイルに:
$('#do').click(function(){requestDoFor(%modelid%);});
問題は、モデル パラメーターをクライアントのこの部分に渡す方法viewですcontroller。テンプレートで簡単な回避策を想像できます。
<input type="submit" id="do" class="buttons" value="Do" objectid="%modelid%" />
そしてJavaScriptでそのようなもの：
$('#do').click(function(event){requestDoFor($(event.target).attr('objectid'))});
しかし、それは完璧に見えません。より良い方法はありますか？
ビュー全体を JavaScript として生成し、ブラウザで DOM 要素を生成する人がいることは知っていますが、このアプローチには独自の欠点があります。他に何が提案できますか？