はJinja2の、BACKBONE.JSとプログレッシブ・エンハンスメント

Question

私は作業のウェブサイトは、Google App Engineの（パイソン+ Jinja2のテンプレートエンジン）の上に構築できます。私は、Backbone.jsとUnderscore.jsを使用してシングルページアプリケーションになるように再設計したいと思っています。目標は、プログレッシブ強化戦略を使用することです。

サイトは最初の訪問時にバックエンドを使用してレンダリングされます。ブラウザがJavaScriptをサポートしている場合、Backbone.jsが引き継ぎます。

私はこの方法を2つの理由から行うことにしました。最初に私が既に持っているすべてのリンクはそのまま残され、次にGoogleのインデックス作成ボットがサイトのコンテンツをクロールできるようになります。

私は、このアプローチには二つの問題があります。

1. 私は私のサイトのバックエンドで1（Jinja2の）およびフロントエンド（Underscore.js）のいずれかで、ほとんどすべてのための2つのテンプレートを持っている必要があります。このような場合、ベストプラクティスは何か疑問に思っていましたか？あなたはすべてのための2つのテンプレートを避けるために提案することができる何かはありますか？

2. Backbone.js + Underscore.jsを使用するためにフロントエンドのテンプレートをロードするにはどうすればよいですか？最初のリクエストでそれらをすべてロードするか、必要なときに非同期にリクエストできます。

私はどんな考えにも感謝します！おかげさまで

一部のリソース：

http://ricostacruz.com/backbone-patterns/

この1つは、既存のHTMLにBACKBONE.JSをバインドする方法について説明します。 http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

Answer 1

だから私は最近（今年）似たような状況を経ました。 ＃1が対処するのは非常に厳しいものです。テンプレートを複製するだけでなく、サイトを取り巻くすべてのビジネスロジックを複製する必要があることに留意してください。たとえば、ユーザーが特定のページにコメントを追加できるようにするとします。あなたが説明した方法を使用して、あなたは両方を持っているでしょう、サーバ側とクライアント側のコメントテンプレートがあり、さらに、に（追加/削除/クライアントとサーバーの両方でコメントを編集するために必要なロジックを複製javascriptの有無にかかわらずユーザーに対応）。 Jinja2ファンクションブロックを使用するとテンプレートの複製が簡単になりますが、ロジックの複製は興味深いところです。私はちょうどそれをやろうとし、数ヶ月後に完全な書き直しを終わらせました。

私があなたに与えるアドバイスは、あなたがjavascriptとnon-javascriptの両方のユーザーをサポートできるというアイデアです。どちらか一方のためにあなたのサイトを作ってください。私は個人的にjavascriptルートを自分で選ぶことにしました。これには2つのオプションがあります。単一のページアプリを作るか、主に機能性のためにjavascriptを活用するアプリケーションを作るが、すべてのものをサーバー側にレンダリングする。他にもたくさんのオプションがありますが、私が見てきた2つのオプションがあります。私は第二の選択肢に行きました。だから、私がしているのは、最初のページの読み込みは、サーバーによって行われます。 Backbone.jsは各要素を消費し、モデルとビューを作成します。これは主に属性dataを利用して行われます。

<div class="comment" data-id="1" data-body="You Suck"></div> 

私はその後、言ったコメントを消費し、そのようにそれのうちのモデルを作成します。：だから、例えば私はこのような要素だろうコメントビューを作成するには

最後に

var CommentModel = Backbone.Model.extend(); 

var comment_el = $('.comment'); 
var comment_model = new CommentModel($(comment_el).data()); 

を、Iその後

var CommentView = Backbone.View.extend({ 
    initialize: function() {}, 
    edit: function() {}, 
    delete: function() {} 
}); 

var comment_view = new CommentView({ 
    model: comment_model 
}); 

あなたが尋ねるかもしれない、「私は何かを再レンダリングする必要がある場合、私はクライアント側を必要としないもの：その後、サイトに機能を追加することができ、その作成したモデルとビューをバックアップうテンプレートfまたはその？"いいえ。クライアント側のテンプレートはかなり新しいものです。私はまだ私たちがまだそこにいるとは思わないので、私は個人的にそれらを避けようとしています。そして、私はいつもシングルページのアプリケーションが自分の好みに応じて反応しないと感じました。私はそれについて私に同意しない人がたくさんいると確信していますが、それは私が最近のプロジェクトで取った立場です。つまり、私はサーバー上のすべてをレンダリングし、JSONの形でhtmlをクライアントに送信してから、DOMに注入します。だから私はJSONを私のBackbone.jsコードに戻すAPIエンドポイントを持っています。これは現在私のために取り組んでいるものですが、この問題は通常大部分の状況にあります。あなたは本当にあなたのニーズが何であるかを見なければなりません。それは価値があるので、私は主に、現在のシステムを、シングルページのアプリ全体を試した後にTwitterが最終的に決めたものに基づいていました。あなたはそれについてhereについて読むことができます。