Jinja2,Backbone.js和渐进增强

Question

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

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

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

这种方法有两个问题:

1. 我需要在我的网站上有几个模板,一个在后端(Jinja2),一个在前端(Underscore.js).我想知道这种情况下的最佳做法是什么？有什么建议可以避免为所有内容设置两个模板吗？

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

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

一些资源:

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

这个描述了如何将Backbone.js绑定到现有的HTML:http: //lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with -主链-JS /

Answer 1

所以我最近(今年)经历了类似的情况.我会让你知道#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在尝试整个单页应用程序之后最终决定做的事情.你可以在这里阅读它.