5

I have a working website build on top of Google App Engine (Python + Jinja2 template engine). I would like to start redesigning it to be single page application using Backbone.js and Underscore.js. The goal is to use progressive enhancement strategy.

The site will still be rendered using backend on the first visit. And then if the browser supports JavaScript the Backbone.js will take over.

I decided to do it this way for two reasons. First all the links I already have will stay intact and second the Google indexing bot will be able to crawl the site content.

I have two problems with this approach:

  1. I need to have two templates for almost everything on my site one on the backend (Jinja2) and one on the frontend (Underscore.js). I was wondering what are the best practices in cases like this? Is there anything you can suggest to avoid having two templates for everything?

  2. How do I load the templates for the frontend to use Backbone.js + Underscore.js? I can load them all in the initial request or request them asynchronously when they are needed.

I appreciate any thoughts! Thanks.

Some resources:

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

This one describes how to bind Backbone.js to existing HTML: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

4

1 回答 1

7

所以我最近（今年）经历了类似的情况。我会让你知道#1是一件非常难以处理的事情。请记住，您不仅需要复制模板，还需要复制围绕您网站的所有业务逻辑。例如，假设您允许用户在特定页面上添加评论。使用您描述的方法，您必须在服务器端和客户端都有一个评论模板，此外，复制在客户端和服务器上添加/删除/编辑评论所需的逻辑（到容纳有和没有 javascript 的用户）。使用 Jinja2 功能块很容易复制模板，但逻辑的复制是有趣的地方。我试图做到这一点，并在几个月后完成了一次完整的重写。

所以我给你的建议是放弃你可以同时支持 javascript 和非 javascript 用户的想法。使您的网站适合其中之一。我个人选择自己走javascript路线。这使您有两个选择。制作一个单页应用程序，或者制作一个很大程度上利用 javascript 来实现功能，但在服务器端呈现所有内容的应用程序。可能还有许多其他选项，但这是我见过的最受欢迎的两个。我选择了第二个选项。所以我所做的是，初始页面加载是由服务器完成的。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());

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

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

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

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

于 2012-12-29T19:24:36.010 回答