Jinja2的，Backbone.js的和渐进增强 [英] Jinja2, Backbone.js and progressive enhancement

问题描述

我有一个工作网站建立在谷歌应用程序引擎（Python的+ Jinja2的模板引擎）的顶部。我想开始重新设计它是使用Backbone.js的和Underscore.js单页的应用程序。我们的目标是用渐进增强策略。

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.

该网站仍会使用在第一次访问后端渲染。然后，如果浏览器支持JavaScript的Backbone.js的将接管。

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. 我需要有两个模板在后端（Jinja2的），一个在前端（Underscore.js）几乎所有的东西在我的网站之一。我想知道什么是在这样的情况下，最好的做法？你有什么可以建议，以避免一切两个模板？

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?

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

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.

我AP preciate任何的想法！
谢谢你。

I appreciate any thoughts! Thanks.

一些资源：

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

这其中介绍了如何Backbone.js的绑定到现有的HTML：
<一href=\"http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/\">http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

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/

推荐答案

所以，最近我（今年）通过了类似的情况去了。我会让你知道的时候头是＃1是对付一个令人难以置信的艰难的事情。请记住，你不仅会重复你的模板，但所有的业务逻辑周围您的网站。例如，假设您允许用户在特定页面上添加注释。使用您所描述的方法，就必须既对服务器端和客户端的一个注释模板，另外，重复对添加/删除/修改的客户机和服务器上的注释所需的逻辑（以容纳有和没有的JavaScript）的用户。的模板复制很容易使用Jinja2的功能块，但逻辑的重复是它得到有趣。我试图做到这一点，并最终做后完全重新写了几个月。

So I recently(this year) went through a similar situation. I'll let you know a head of time that #1 is an incredibly tough thing to deal with. Keep in mind, that you not only would have to duplicate your templates, but ALL business logic surrounding your site. For example, let's say you allow users to add comments on a particular page. Using the method you described, you would have to both have a comment template on the server-side and the client-side, and additionally, duplicate the logic required to add/delete/edit a comment on both the client and the server(to accommodate users with and without javascript). Duplication of the templates is easy using Jinja2 function blocks, but the duplication of the logic is where it gets interesting. I attempted to do just that, and ended up doing a full re-write a few months later.

所以，我给你的建议是沟，你可以同时支持JavaScript和非JavaScript的用户的想法。让您的网站为一方或另一方。我个人选择去的JavaScript路线自己。这使你有两个选择。做一个单页的应用程序，或者使在很大程度上利用了JavaScript的功能，但一切都渲染服务器端的应用程序。可能有一些其他的选择，但这些是两个最流行的，我都看见了。我去了第二个选项。所以，我做什么，是初始页面加载由服务器完成。 Backbone.js的那么消耗的每个元素，使模型和视图了出来。这主要是做利用数据属性。因此，例如，创建一个评论查看我有一个元素是这样的：

So the advice I would give to you is ditch the idea that you can support both javascript and non-javascript users. Make your site for one or the other. I personally chose to go the javascript route myself. This leaves you with two options. Make a single page app, or make an app that largely leverages javascript for functionality, but renders everything server-side. There are probably a number of other options, but those are the two most popular that I have seen. I went with the second option. So what I do, is the initial page load is done by the server. Backbone.js then consumes each element and makes models and views out of them. This is largely done leveraging data attributes. So for example to create a comment view I would have an element like this:

<div class="comment" data-id="1" data-body="You Suck"></div>

我会再消耗说评论，创建一个模型，它像这样：

I would then consume said comment, and create a model out of it like so:

var CommentModel = Backbone.Model.extend();

var comment_el = $('.comment');
var comment_model = new CommentModel($(comment_el).data());

最后，我会支持一个视图与创建模型，然后可以向网站添加功能：

Finally, I would back a view with that created model, which can then add functionality to the site:

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

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

然后，你可能会问，如果我需要重新渲染的东西，难道我需要为客户端模板？不。客户端模板是pretty新事物。我个人尽量避免他们，因为我不认为我们是非常有着呢，我一直觉得单页的应用程序都只是不适合我的口味不够敏感。我敢肯定有很多人谁也同意我的看法上，但这是我带着我最近的项目上的立场。这样说来，我渲染服务器上的所有内容并发送HTML到客户端JSON的形式，我再注入到DOM。所以，我有一吨的API端点，它返回JSON我Backbone.js的code的。这是目前正在为我，但这个问题在很大程度上是情境一般。你要真看你的需求是什么。对于它的价值，我主要是基于我目前的系统了什么Twitter的最终决定尝试整单页应用之后的事情要做。你可以阅读一下这里 。

Then you might be asking, "What if I need to re-render something, don't I need client-side templates for that?" Nope. Client-side templates are a pretty new thing. I personally try to avoid them as I don't think we're quite there yet, and I have always felt that single-page apps are just not responsive enough for my tastes. I'm sure there are plenty of people who would disagree with me on that, but that's the stance I took with my most recent project. So that being said, I render everything on the server and send the html to the client in the form of JSON, which I then inject into the DOM. So I have a ton of api endpoints, which return JSON to my Backbone.js code. This is what is currently working out for me, but this problem is largely situational usually. You have to really look at what your needs are. For it's worth, I largely based my current system off of what Twitter eventually decided to do after trying the whole single-page app thing. You can read about it here.

这篇关于Jinja2的，Backbone.js的和渐进增强的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！