django-dynamicwidgets 1.0

url配置

要自动发现小部件路由，必须导入所有处理程序。 这可以使用dynamicwidgets.handlers.default.autodiscover（）来完成。之后 因此，您必须将handler视图放在url树的某个位置。好地方 可能是应用程序url.py文件：

from dynamicwidgets import handlers

handlers.default.autodiscover()

urlpatterns = patterns('',
    # ...
    url(r'^dynamicwidget/', include('dynamicwidgets.urls')),
)

javascript设置

动态小部件库使用javascript动态加载html块和 取决于jquery。

在将使用动态widges的页面上，包括jquery和dynamic Widges库：

{# include jQuery #}
<script src="{% static "dynamicwidgets/js/dynamicwidget.js" %}" type="text/javascript"></script>

此外，before包括上述库，最好在<；head>；标记中， 指定小部件视图的路径：

<script type="text/javascript">window.DYNAMIC_WIDGETS_URL = '{% url "dynamicwidgets.widgets" %}';</script>

小部件处理程序

widget handler是一个始终接受两个参数的函数-请求和 小部件列表。要定义处理程序，请用 动态widgets.decorators.widget\u处理程序：

from articles.models import Article
from dynamicwidgets.decorators import widget_handler


@widget_handler(r'^user-name$')
def user_name(request, widgets):
    if request.user.is_anonymous():
        return {'user-name': {'html': 'anonymous'}}
    return {'user-name': {'html': request.user.username}}

每个处理程序都应该返回一个字典，其中键是小部件名称和 值是字典。如果值字典包含html键，则它是值 将在页面上呈现为小部件内容。

出于性能原因，所有小部件匹配都聚合在单个 请求和每个小部件处理程序只调用一次。因为 这样，您可以将一些查询保存到数据库：

@widget_handler(r'^article-details:(?P<art_id>\d+)$')
def article_details(request, widgets):
    articles = Article.objects.filter(
        id__in=[w.params.art_id for w in widgets])
    article_by_id = {art.id: art for art in articles}

    response = {}
    for widget in widgets:
        article = article_by_id[int(widget.params.art_id)]
        html = '<h1>article {}: {}</h1>'.format(article.id, article.title)
        response[widget.wid] = {'html': html}
    return response

每个小部件都包含两个属性：

• 包含小部件名称的wid，由 视图用
装饰
• params保留从decorator的正则中提取的零个或多个参数 表达式

HTML属性

每当您想使用小部件时，请将dw属性添加到元素中。那些罐头 比利时：

• dw load对于文档准备好后应该加载的小部件，
• dw单击以获取应加载到上的小部件单击事件，
• dw hover用于应加载到mouseover事件上的小部件。

使用它们非常简单：

<div class="header">
    <span class="userinfo" dw-load="user-name"></span>
</div>
<div class="content">
    <span class="article" dw-click="article:1">click to show article<span>
    <span class="article" dw-hover="article:2">hover to show article<span>
</div>

此外，您可以添加一次dw属性，以确保widget内容 只提取一次：

<span class="article" dw-hover="article:2" dw-once>hover to show article<span>

但仅仅替换内容可能还不够。这就是为什么吃饱了 属性值的格式可以使用多个块构建，这些块由 逗号字符：

dw-<action>="<widget name>,<insert method>,<destination selector>"

• <；widget name>；用于匹配处理程序函数。这是唯一的要求 值字符串的一部分，
• <；insert method>；是任何有效的jquery输入方法，如html，append， 前置。默认值为html，
• <；destination selector>；是一个额外的sizzle选择器。选择器 从@开始，字符总是缩小到dw的元素 属性已声明。默认值为@。

了解以上所有内容，可以轻松制作带有动态内容加载的下拉菜单：

<style type="text/css">
    .dropdown-menu .menu-items       {display: none;}
    .dropdown-menu:hover .menu-items {display: block;}
</style>

<div class="dropdown-menu" dw-hover="article-attributes:3,html,@.menu-items" dw-once>
    Menu
    <span class="menu-items">
        Loading...
    </span>
</div>