2011-11-17 19 views
9

私はページがロードされたときに、私はすべての既存のコンテンツは上のプリレンダリングしたいのですが理想的...ASP.NET MVCバックエンドとbackbone.jsフロントエンドの間でテンプレートを共有するにはどうすればよいですか?

をASP.NET MVCアプリケーションをbulidingとなど、クライアント側の相互作用のためのBACKBONE.JSを検討していますサーバーサイドで、そしてbackbone.jsによってレンダリングされた新しいコンテンツをオンザフライで表示します。

当然のことながら、実際にはテンプレートを2度書きたいとは思っていません。

私は、剃刀ビューエンジンを使用してテンプレートを作成し、サーバーとフロントエンドの間で共有する必要のある小領域に対して、口髭紋テンプレートを使用して、テンプレートを作成することを検討しています。

私の質問は、この外観の実際の技術的実装はどのようなものですか?

これを達成する方法のコードサンプルを提供できますか?

たとえば、ライブラリを使用してサーバー上でテンプレートをレンダリングし、テンプレートファイルからテキストを手動で抽出してJavaScriptに挿入しますか?

+1

Aを使用して新しいコンテンツを更新するには、 'RenderPartial'または' @ Html.Partial'を使用できますジャックスそうすれば、あなたはあなたのRazorテンプレートを持っているだけです。ダブルボーナス:サーバーへの別のトリップを回避するために、新しいコンテンツを更新した後に部分ビューを返します。 –

+0

+1良い質問です。私は、クライアントサーバー間でビューを共有する良い方法を見いだせませんでした。私はできることを望み、両方を維持しなければならないリスクと仕事を導入する – reach4thelasers

答えて

1

ないので、多くの技術的な機能の答えとして、(口ひげを使用して)サーバ - とクライアント側のレンダリングを取り入れた機能的な流れのためにここに私の答えを参照してください

Accessibility and all these JavaScript frameworks

HTH、

1

私はRazor Client Templatesを評価しています(GitHub)を使用しています。これはバージョン0.7.0であり、現在はやや脆いようです。

個々の部分的な剃刀ビューをJavaScriptテンプレートとして参照することができます。

市販製品の一部として、私たちはこれをさらに取って、Handlebars.js互換テンプレートをRazorパーシャルから出力します。

+2

私は同じことを考えている。あなたはあなたのバージョンのどこにいましたか? – Nathan

0

私たちのプロジェクトではjQueryテンプレートを使用していましたが、私はそれらを使いました。私たちは実際にこの1つをhttp://github.com/BorisMoore/jsviewsとして使用しました。これは、レンダリングから文字列へのjqueryテンプレートのビット最適化バージョンです。 デモがたくさんあります。 サーバー側では、すべてのテンプレートを1つの部分ビューに置き、レンダリングしました。

1

RESTy MVCアプリケーションが必要な場合は、ServiceStackをお勧めします。 バックボーンw servicestack todo-appがあり、あなたはソースを見ることができます。

コントローラーがバックボーン用のjsonとしてモデルを出力する場合、私は何か似たようなことをしました。

0

最初にMVC.netとWebApiにv8を埋め込み、まったく同じテンプレートを維持するためにアンダースコアまたはひげ剃りを使用してテンプレートを実装しました。

テンプレートが同じ場合でも、レンダリングロジックが異なる場合があり、テンプレート、フロントエンドビュー、バックエンドビューを常にリファクタリングする必要があります。特にあなたが安らかなAPIをしている場合。

最後に、ヘッドレスブラウザ(PhantomJs)を使用してページをレンダリングすることで、アクセシビリティとSEO要件のためにJavaScript以外の代替手段を提供するための他のソリューションを選択します。

PhantomJsをサーバーにインストールし、javascriptを追加してすべてのJavaScriptインタラクションを完全にレンダリングし、html出力を提供する必要があります。あなたはここに使用例を見つけることができ

http://backbonetutorials.com/seo-for-single-page-apps/

の例では、Node.jsのためのものですが、それはASP

でそれを実装するのは簡単です私たちが使用するファントムスクリプトは似ています

//phantom-server.js 

var page = require('webpage').create(); 
var system = require('system'); 

var lastReceived = new Date().getTime(); 
var requestCount = 0; 
var responseCount = 0; 
var requestIds = []; 
var startTime = new Date().getTime(); 

page.onResourceReceived = function (response) { 
    if(requestIds.indexOf(response.id) !== -1) { 
     lastReceived = new Date().getTime(); 
     responseCount++; 
     requestIds[requestIds.indexOf(response.id)] = null; 
    } 
}; 
page.onResourceRequested = function (request) { 
    if(requestIds.indexOf(request.id) === -1) { 
     requestIds.push(request.id); 
     requestCount++; 
    } 
}; 

// Open the page 
page.open(system.args[1], function() {}); 

var checkComplete = function() { 
    // We don't allow it to take longer than 5 seconds but 
    // don't return until all requests are finished 
    if((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 5000) { 
    clearInterval(checkCompleteInterval); 
    console.log(page.content); 
    phantom.exit(); 
    } 
} 
// Let us check to see if the page is finished rendering 
var checkCompleteInterval = setInterval(checkComplete, 1); 

同じ結果を提供するサービスもあります。http://prerender.io/

関連する問題