当前位置：文江博客话题详情

JavaScript Django client-side-templating

Django 和客户端 JavaScript 模板

发布于 2024-12-21 09:42:41 字数 1630 浏览 2 评论 0 原文

简介

我目前正在编写一个非常标准的基于 Django 的应用程序（基本上是一个奇特的 CRM/联系人列表之类的东西）。这是可行的，但随着我不断尝试使用越来越多的 AJAXy UI 代码（使用 jQuery）来改进界面，它开始变得真正令人痛苦。我得到了很长的脆弱的 jQuery 事件处理程序块，它们解析 DOM，将更改推送回服务器，获取一些 JSON，并尝试基于此更新 DOM。

我觉得，至少，我可能想添加一些客户端模板。或者，我可以尝试切换到 JS 框架，并仅使用我的 Django 应用程序作为数据库抽象层。或者，即使我了解并喜欢 Python，我也可以放弃 Django 应用程序，并尝试使用 JS/Node.js 解决方案或其他解决方案。

还有其他人遇到过这种情况吗？你是怎么解决的？

设计目标

DRY：我不想复制我的模型或模板（或者至少，不必要的复制）。
我希望访问者登陆页面以获得服务器端渲染的结果。
当访问者单击内容时，我想通过客户端模板和渲染来处理该问题，并通过对 REST 接口的 AJAX 调用来保持服务器更新。

那么...我该怎么做呢？我收集了一些框架和模板系统的链接。排名不分先后：

dust.js：

这显然是被 LinkedIn 使用来解决类似的问题。它在服务器端使用 Node.js，这并不理想（我从未使用过 Node），但至少它不是基于 JVM 的。它在 github 上似乎也处于休眠状态——我发现了一些邮件列表，人们一直想知道维护者去了哪里。听起来确实不错——LinkedIn 的博客文章很好地推销了这项技术，尤其是编译它的能力。但它似乎只是在模板化。这足以满足我想要的吗？

Mustache：

这个选项有Python和JS实现，而且看起来很流行......但我找不到任何人似乎在使用使用 Django 的胡子模板。这是因为太容易值得发表博客文章，还是不可能或不建议这样做？它也相当有限；至少我可能需要转向某种 MVC JS 框架，对吧？

Backbone、Spine、KnockoutJS、EmberJS、JavascriptMVC 等：

框架太多了，让人望而生畏。乍一看，所有这些似乎都非常好。如果我走这条路，我似乎还需要重写我的应用程序的很多部分，而且我真的很想找到已经真正做过类似事情的人。另外，如果对来自 Django 背景的人有一个明确的选择，那就太好了；我不想学习六个不同的框架来评估它们。

DerbyJS

这看起来很有趣，因为它在一个包中处理客户端和服务器端，但有点不成熟。他们警告不要在生产中使用它，如果我理解文档，它还不支持任何形式的持久性，这是......限制。我有一种感觉，如果它完成了，它将完美地满足我想要的...所以

...

所以，呃...现在怎么办？有没有人使用过这些工具来尝试将客户端渲染添加到 Django Web 应用程序中？进展如何？

原文

Intro

I'm currently writing a very standard Django based app (basically a fancy CRM/contact list sort of thing). It's sort of working, but as I keep trying to improve the interface with more and more AJAXy UI code (using jQuery) it's starting to get to be a real pain to work with. I'm getting long blocks of fragile jQuery event handlers which parse the DOM, push changes back to the server, get some JSON back, and try and update the DOM based on that.

I feel like, at a minimum, I probably want to add some client-side templates into the mix. Alternatively, I could try and switch to a JS framework, and just use my Django app as a database abstraction layer. Or even though I know and love Python, I could abandon the Django app, and try and go with a JS/Node.js solution or something.

Has anyone else been in this situation? How did you solve it?

Design goals

DRY: I don't want to have to replicate my models or my templates (or at least, any more than necessary).
I want visitors landing on a page to get the results rendereed server-side.
As visitors click on things, I'd like to handle that via client-side templates and rendering, and keep the server updated via AJAX calls to a REST interface.

So...how do I do this? I've collected links to a few frameworks and template systems. In no particular order:

dust.js:

This is apparently being used by LinkedIn to solve a similar problem. It uses Node.js on the server side which is not ideal (I've never used Node) but at least it's not JVM based. It also appears to be dormant on github - I've found mailing lists where people have been wondering where the maintainer went. It does sound pretty good - the blog post from LinkedIn does a good job selling the technology, especially the ability to compile it. But it appears to JUST be templating. Is that enough for what I want?

Mustache:

This option has both Python and JS implementations, and seems popular...but I can't find anyone who seems to be using Mustache templates with Django. Is that 'cause it's too easy to deserve a blog post, or is it impossible or otherwise inadvisable? It's also pretty limited; at a minimum I'd probably need to turn to some sort of MVC JS framework, right?

Backbone, Spine, KnockoutJS, EmberJS, JavascriptMVC, etc:

There's so many frameworks it's kind of daunting. All of them seem perfectly good at first glance. It also seems like I'd need to rewrite a LOT of my app if I went this route, and I'd really would like to find someone who has actually done something like this already. Also, it'd be nice if there was a clear choice for someone coming from Django as a background; I don't want to have to learn a half dozen different frameworks to evaluate them.

DerbyJS

This looks interesting as it handles both the client and server sides in one package, but a bit immature. They warn against using it in production, and if I understand the docs it doesn't yet support any form of persistence, which is...limiting. I get the feeling that if it was finished it would be perfect for what I want though...

So....

So, uh...now what? Has anyone used any of these tools to try and add client-side rendering to a Django webapp? How did it go?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

℡Ms空城旧梦 2024-12-28 09:42:41

为了与 Django 模板完全集成，我发现了这个： Yz-Javascript-Django-Template-编译器。我自己从未使用过它，不幸的是它看起来有点缺乏维护。

Swig 是一个类似 JS django 的快速模板引擎。

Pure 是一个编译的 JS 模板工具，只要稍加思考，我认为它可以与 Django 很好地配合使用，因为模板只是正常的有效 HTML。

其他有趣的 JS 模板库：

Handlebars （小胡子)
下划线

回复收藏 0 原文

浅笑依然 2024-12-28 09:42:41

所有提到的框架都只能在客户端工作。就这一点而言，它们值得一看，因为它们是您面临的难题的一部分。

您的设计目标正是我当前项目想要实现的目标。我目前正在尝试做的是：

客户端

使用Backbone +（这里是一些模板引擎）

服务器端

渲染第一组html，以及呈现 Backbone 可以获取和使用的一些 JSON 数据（例如，加载的当前页面、最大页面等）

示例

客户端加载：http://mysite.com/blog/archive/5

服务器渲染：

<html>
    <head>
        <script>
            var data = {
                page:5 // Rendered by Server,
                maxPages: 10
            };

            $(function(){
                // Hook up all Backbone stuff, and hook into interaction events
            });
        </script>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

这解决了设计点 2 和 3：您的服务器加载 Web 应用程序的初始状态，并且用户可以导航从那里开始客户端。

设计点1：在客户端，一切都很好。但是，对于服务器端，您需要一个 js 引擎来按原样呈现您的模板。 LinkedIn 在他们的文章中提到了这一点：

服务器端支持：如果您的客户端无法执行 JavaScript（例如搜索引擎爬虫），则页面必须在服务器端呈现。编写完成后，相同的dust.js模板不仅可以在浏览器中呈现，还可以使用 node.js 或 Rhino。

因此，您有两个选择：

使用带有 Node.js 或 Rhino 的模板引擎，或者
找到其他技术堆栈支持的模板引擎。

有趣的是，由于上面的帖子，我意识到 Mustache 具有可用于大多数常见堆栈的库，可以满足这非常需要，所以我将开始考虑将它与我的项目集成。（不确定是否有任何可用于 Handlebars.js 的库）这应该允许我们为服务器端和客户端编写 Mustache.js 模板，并让它们使用相同的模板在两端渲染 html。

编辑：不应该“服务器端”解决方案不一定需要采用您选择的语言/堆栈。例如，仅仅因为您使用 Dust.js 就意味着您必须在 Node.JS 中编写整个应用程序的代码。也可以通过 shell 命令执行编译脚本来获取。

编辑：事实证明，Mustache 似乎没有“预编译”解决方案，这意味着模板需要直接渲染到页面中进行客户端渲染（因此没有缓存），这并不是 100% 理想。

All the frameworks mentioned only work client-side. That being side, they are worth a look as they are a piece of the puzzle that you are facing.

Your design goals are exactly what I am trying to achieve with my current project. What I am attempting to do at the moment is:

Client-Side

Using Backbone + (some templating engine here)

Server-Side

Renders the first set of html, as well as renders some JSON data that Backbone can pick up and work with (for example, current page that was loaded, max pages etc.)

Example

Client loads: http://mysite.com/blog/archive/5

Server renders:

<html>
    <head>
        <script>
            var data = {
                page:5 // Rendered by Server,
                maxPages: 10
            };

            $(function(){
                // Hook up all Backbone stuff, and hook into interaction events
            });
        </script>
    </head>
    <body>
        <!-- Content -->
    </body>
</html>

This solves Design Points 2 and 3: your server loads the initial state of your web application, and the user can navigate client-side from there.

With design point 1: On the client-side, everything is fine. However, for server-side you require a js engine to render your templates as it is. LinkedIn mentions this in their article:

Server side support: if you have a client that can't execute JavaScript, such as a search engine crawler, a page must be rendered server side. Once written, the same dust.js template can be rendered not only in the browser, but also on the server using node.js or Rhino.

So you're stuck with 2 options:

use a templating engine with either node.js or Rhino, or
find a templating engine with support in other tech stacks.

Funnily enough, thanks to the post above, I realised that Mustache, which have libraries available for most common stacks, fulfils this need perfectly, so I will start having a look at integrating it with my project. (Not sure if there are any libraries available for Handlebars.js) This should allow us to write Mustache.js templates for both server and client side, and have them render html on either ends with the same templates.

EDIT: Should not that a "server-side" solution does not necessarily need to be in your language/stack of choice. For example, just because you're using Dust.js mean you HAVE to code your entire application in Node.JS. It may be possible to get by executing your compilation scripts via a shell command instead.

EDIT: turns out that Mustache does not seem to have a "precompilation" solution, meaning that templates need to be rendered directly into the page for client-side rendering (thus no caching), which isn't 100% ideal.

回复收藏 0 原文

看轻我的陪伴 2024-12-28 09:42:41

我知道这是一个老问题，但我以某种方式到达这里，所以可能其他人也这样做。

我还尝试找到构建 RIA 的解决方案，该解决方案将在尽可能多的设备上运行，响应灵敏、高性能且具有良好的用户体验。正在实施带有模板的后端 Django，以便在需要时可以选择优雅地回退。

现在我正在浏览所有这些 js 框架，我有点担心，主要是性能和可访问性。

考虑到模板是在服务器上实现的，我倾向于使用在后端渲染的 html 片段进行部分 DOM 更新并发送到胖客户端而不是 json 的解决方案。看起来对我来说是最好的选择。

想法取自： http://openmymind.net/ 2012/5/30/客户端与服务器端渲染/

问候，
麦克风

回复收藏 0 原文

ζ澈沫 2024-12-28 09:42:41

我在服务器端和客户端都使用过 Mustache，效果非常好。我使用它的项目只是一个小项目，但我对结果非常满意并会推荐它。

该项目是一个用于调试 HTTP 服务的 Web 应用程序，如果您想查看的话，可以在 GitHub 上找到：Spyglass 。

回复收藏 0 原文

~没有更多了~

关于作者

素食主义者

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

Django 和客户端 JavaScript 模板

简介