UI 模块

优质

小牛编辑

115浏览

2023-12-01

Tornado 支持一些 UI 模块，它们可以帮你创建标准的，易被重用的应用程序级的 UI 组件。这些 UI 模块就跟特殊的函数调用一样，可以用来渲染页面组件，而这些组件可以有自己的 CSS 和 JavaScript。

例如你正在写一个博客的应用，你希望在首页和单篇文章的页面都显示文章列表，你可以创建一个叫做 Entry 的 UI 模块，让他在两个地方分别显示出来。首选需要为你的 UI 模块创建一个 Python 模组文件，就叫 uimodules.py 好了:

class Entry(tornado.web.UIModule):
    def render(self, entry, show_comments=False):
        return self.render_string(
            "module-entry.html", entry=entry, show_comments=show_comments)

然后通过 ui_modules 配置项告诉 Tornado 在应用当中使用 uimodules.py：

class HomeHandler(tornado.web.RequestHandler):
    def get(self):
        entries = self.db.query("SELECT * FROM entries ORDER BY date DESC")
        self.render("home.html", entries=entries)

class EntryHandler(tornado.web.RequestHandler):
    def get(self, entry_id):
        entry = self.db.get("SELECT * FROM entries WHERE id = %s", entry_id)
        if not entry: raise tornado.web.HTTPError(404)
        self.render("entry.html", entry=entry)

settings = {
    "ui_modules": uimodules,
}
application = tornado.web.Application([
    (r"/", HomeHandler),
    (r"/entry/([0-9]+)", EntryHandler),
], **settings)

在 home.html 中，你不需要写繁复的 HTML 代码，只要引用 Entry 就可以了：

{% for entry in entries %}
  {% module Entry(entry) %}
{% end %}

在 entry.html 里面，你需要使用 show_comments 参数来引用 Entry 模块，用来显示展开的 Entry 内容：

{% module Entry(entry, show_comments=True) %}

你可以为 UI 模型配置自己的 CSS 和 JavaScript ，只要复写 embedded_css、 embedded_javascript、javascipt_files、css_files 就可以了：

class Entry(tornado.web.UIModule):
    def embedded_css(self):
        return ".entry { margin-bottom: 1em; }"

    def render(self, entry, show_comments=False):
        return self.render_string(
            "module-entry.html", show_comments=show_comments)

即使一页中有多个相同的 UI 组件，UI 组件的 CSS 和 JavaScript 部分只会被渲染一次。 CSS 是在页面的 <head> 部分，而 JavaScript 被渲染在页面结尾 </body> 之前的位置。

在不需要额外 Python 代码的情况下，模板文件也可以当做 UI 模块直接使用。例如前面的例子可以以下面的方式实现，只要把这几行放到 module-entry.html 中就可以了：

{{ set_resources(embedded_css=".entry { margin-bottom: 1em; }") }}
<!-- more template html... -->

这个修改过的模块式模板可以通过下面的方法调用：

{% module Template("module-entry.html", show_comments=True) %}

set_resources 函数只能在 {% module Template(...) %} 调用的模板中访问到。和 {% include ... %} 不同，模块式模板使用了和它们的上级模板不同的命名空间——它们只能访问到全局模板命名空间和它们自己的关键字参数。