Jak mogę udostępniać szablony między moim backendem ASP.NET MVC i moim interfejsem backbone.js?

Question

Jestem buliding aplikacji w ASP.NET MVC i biorąc pod uwagę backbone.js dla interakcji po stronie klienta itp ..

Idealnie, gdy strony są ładowane chciałbym mieć wszystkie istniejące treści wstępnie wyrenderowane na stronę serwera, a następnie dowolną nową treść renderowaną przez backbone.js w locie.

Naturalnie nie chcę dwa razy pisać moich szablonów.

Rozważam zastosowanie większości szablonów w szablonie za pomocą mechanizmu podglądu maszynki do golenia, a następnie użycie szablonów wąsów dla małych obszarów, które muszą być współużytkowane między serwerem a interfejsem użytkownika.

Moje pytanie brzmi, jak wygląda faktyczna implementacja techniczna?

Czy możesz podać próbki kodu, w jaki sposób można to osiągnąć?

Na przykład biblioteka, której chcesz użyć do renderowania szablonu na serwerze, a następnie ręcznie wyodrębnić tekst z pliku szablonu i wstrzyknąć go do javascript?

Answer 1

Nie tyle techniczny jako odpowiedź funkcjonalna zobaczyć moją odpowiedź tutaj dla przepływu funkcjonalnej włączenie server- i rendering stronie klienta (przy użyciu Wąsy)

Accessibility and all these JavaScript frameworks

HTH,

Answer 2

Jestem oceny Razor Client Templates (GitHub) w tej chwili. Jest w wersji 0.7.0 i wydaje się obecnie nieco kruchy.

Umożliwia odsyłacz do poszczególnych widoków częściowych maszynki do golenia w postaci szablonów JavaScript.

W ramach produktu komercyjnego będziemy to robić dalej, aby wyposażyć kompatybilne szablony Handlebars.js z naszych częściowych maszynki do golenia.

Answer 3

Czy brałeś pod uwagę szablony jQuery, w naszym projekcie użyliśmy ich i uznałem je za przydatne. W rzeczywistości używaliśmy tego http://github.com/BorisMoore/jsviews, czyli nieco zoptymalizowanej wersji szablonu jquery do renderowania do napisu. Masz tam wiele demonstracji. Po stronie serwera umieściliśmy wszystkie szablony w jednym częściowym widoku i wyrenderowaliśmy je.

Answer 4

Jeśli potrzebujesz aplikacji RESTY MVC, polecam ServiceStack. Jest szkielet w servicestack todo-app można przeglądać-źródła na.

Zrobiłem coś podobnego (nie używając wąsów), gdzie kontroler wyprowadza model jako json dla szkieletu do pracy.

Answer 5

Najpierw zdecydowaliśmy się na osadzenie v8 w MVC.net i WebApi i wdrożenie szablonów z podkreśleniem lub wąsami, aby zachować dokładnie te same szablony.

Nawet jeśli masz te same szablony, logika renderowania może być inna i potrzebujesz ciągłego refaktoryzowania szablonów, widoków frontendu i widoków zaplecza. Zwłaszcza jeśli robisz restfull API.

Ostatecznie wybieramy inne rozwiązanie, które zapewnia alternatywę dla javascript dla ułatwień dostępu i seo za pomocą przeglądarki bezgłowej (PhantomJs) do renderowania stron.

Jest to dość łatwe do wdrożenia, musisz zainstalować PhantomJs na swoim serwerze, dodać javascript, aby całkowicie wyświetlić stronę ze wszystkimi interakcjami javascript i wyświetlać dane wyjściowe html.

Można znaleźć przykład zastosowania tutaj: http://backbonetutorials.com/seo-for-single-page-apps/

Przykładem jest dla node.js ale to jest łatwe do wdrożenia go z ASP

Skrypt phantom używamy jest podobna:

//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); 

Istnieją również usługi zapewniające taki sam wynik: http://prerender.io/