Question

我在ASP.NET MVC中构建应用程序并考虑使用backbone.js进行客户端交互等。

理想情况下，当页面被加载时，我希望在服务器端预先渲染所有现有内容，然后动态地使用backbone.js呈现的任何新内容。

当然，我真的不想写两次模板。

我正在考虑使用剃刀视图引擎模板化大部分应用程序，然后使用胡子模板来处理需要在服务器和前端之间共享的小区域。

我的问题是，这个实际的技术实现是什么样的？

您能否提供有关如何实现此目标的代码示例？

例如，您将使用哪个库在服务器上呈现模板，然后手动从模板文件中提取文本并将其注入javascript中？

Answer 1

与技术和功能性答案不同，请参阅我的答案，了解包含服务器和客户端渲染的功能流程（使用Mustache）

Accessibility and all these JavaScript frameworks

HTH，

Answer 2

我正在评估Razor Client Templates（GitHub）。它的版本为0.7.0，目前看起来有点脆弱。

它允许您将各个部分剃刀视图引用为JavaScript模板。

作为商业产品的一部分，我们将进一步采用Razor partials输出Handlebars.js兼容模板。

Answer 3

如果您想要RESTy MVC应用程序，我建议ServiceStack。你可以查看源代码todo-app的骨干服务。

我做了类似的事情（不使用胡子），控制器将模型输出为json，供骨干使用。

Answer 4

您是否考虑过jQuery模板，在我们使用它们的项目中，我发现它们非常有用。我们实际上使用了这个http://github.com/BorisMoore/jsviews，这是jquery模板的一个优化版本，用于渲染到字符串。那里你有很多演示。在服务器端，我们将所有模板放在一个局部视图中并进行渲染。

Answer 5

首先，我们选择在MVC.net和WebApi中嵌入v8，并使用下划线或小胡子来实现模板，以保持完全相同的模板。

即使您拥有相同的模板，渲染逻辑也可能不同，您需要不断重构模板，前端视图和后端视图。特别是如果你正在做一个restfull 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/

如何在我的ASP.NET MVC后端和我的backbone.js前端之间共享模板？

5 个答案: