backbone.js - Jinja2、Backbone.js 和渐进增强

Question

我有一个基于 Google App Engine(Python + Jinja2 模板引擎)的工作网站。我想开始使用 Backbone.js 和 Underscore.js 将其重新设计为单页应用程序。目标是使用渐进增强策略。

该站点仍将在第一次访问时使用后端呈现。然后，如果浏览器支持 JavaScript，Backbone.js 将接管。

我决定这样做有两个原因。首先，我已经拥有的所有链接都将保持不变，其次谷歌索引机器人将能够抓取网站内容。

这种方法有两个问题:

我需要为我网站上的几乎所有内容提供两个模板，一个在后端(Jinja2)，一个在前端(Underscore.js)。我想知道在这种情况下的最佳做法是什么？您有什么建议可以避免所有内容都使用两个模板吗？

如何加载前端模板以使用 Backbone.js + Underscore.js？我可以在初始请求中将它们全部加载或在需要时异步请求它们。

我很感激任何想法!
谢谢。

一些资源:

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

这篇描述了如何将 Backbone.js 绑定(bind)到现有的 HTML:
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 功能 block 很容易复制模板，但逻辑的复制是有趣的地方。我试图做到这一点，并在几个月后完成了一次完整的重写。

所以我给你的建议是放弃你可以同时支持 javascript 和非 javascript 用户的想法。使您的网站适合其中之一。我个人选择自己走javascript路线。这使您有两个选择。制作一个单页应用程序，或者制作一个很大程度上利用 javascript 来实现功能，但在服务器端呈现所有内容的应用程序。可能还有许多其他选项，但这是我见过的最受欢迎的两个。我选择了第二个选项。所以我所做的是，初始页面加载是由服务器完成的。 Backbone.js 然后使用每个元素并从中生成模型和 View 。这主要是利用 data 完成的。属性。因此，例如要创建一个评论 View ，我将有一个这样的元素:

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

最后，我将使用创建的模型支持 View ，然后可以向站点添加功能:

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

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

然后你可能会问，“如果我需要重新渲染一些东西，我不需要客户端模板吗？”没有。客户端模板是一个相当新的东西。我个人尽量避免使用它们，因为我认为我们还没有完全做到这一点，而且我一直觉得单页应用程序的响应速度不足以满足我的口味。我敢肯定，在这点上会有很多人不同意我的观点，但这是我在最近的项目中所采取的立场。话虽如此，我在服务器上渲染所有内容并以 JSON 的形式将 html 发送到客户端，然后将其注入(inject) DOM。所以我有大量的 api 端点，它们将 JSON 返回到我的 Backbone.js 代码。这就是我目前正在解决的问题，但这个问题通常在很大程度上是情境性的。你必须真正看看你的需求是什么。值得一提的是，我目前的系统很大程度上基于 Twitter 在尝试了整个单页应用程序之后最终决定做的事情。你可以阅读它 here .