我希望能够在服务器端轻松创建由变色龙和金字塔支持的 ajax“小部件”。
Pyramid 是否提供任何可以简化编写小部件的管道代码?
我目前的方法是我有一个使用 home.pt 作为渲染器的主视图。home.pt 使用宏 base.pt 定义页面结构并为 home.pt 提供一个插槽来填充。base.pt 还使用了我编写的登录“小部件”宏(请参阅下面的 account_login_widget.pt)。
从理论上讲,这一切听起来都很棒......我有一个可重复使用的登录小部件,可以在许多页面中使用,但我目前的方法效果不佳。我的登录小部件在其渲染器(服务器需要定义)中使用像 ${username} 这样的变量。我希望登录小部件及其呈现尽可能独立。但是以我目前的做事方式,主视图代码需要了解登录小部件的需求,并在字典中提供用户名、formrender 和其他变量。肯定不好...
我觉得我接近正确的想法,但错过了一些东西......
有什么想法吗?
基础.pt:
<html>
<head></head>
<body>
<div id="container">
    <div id="header">
        <span metal:use-macro="load: account_login_widget.pt"></span>     
    </div>
    <div id="middle">
        <span metal:define-slot="content"></span>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>
主页.pt:
<div metal:use-macro="load: base.pt">
<span metal:fill-slot="content">
    <div>my stuff</div>
</span>
</div>
account_login_widget.pt:
<span metal:define-macro="account_login_widget">
<script type="text/javascript">
(function($) {
    $.fn.my_function = function() {
        $('#login_form').submit(function(e) {
            e.preventDefault();
            // ajax call
            $.post(some_url, some_data, function(response) {
                $('#account_login_widget').html(response);
            });
        };
        return this;
    };
})(jQuery);
// Define the entry point    
$(document).ready(function() {
    $(document).my_function();
});
</script>
<div id="account_login_widget">
<div id="login_bar" tal:condition="not username">
    ${form_renderer.begin(...)}
        ... my form ...
    ${form_renderer.end()}
    <span tal:condition="login_failed">Login failed</span>
    <div id="forgot_password_link"><a href="#">Forgot Password?</a></div>
    <div id="create_account_link"><a href="${signup_url}">Create Account</a></div>
</div>
<div tal:condition="username">
    Welcome <strong>${username}</strong>! <a href="${logout_url}">Logout</a>
</div>
</div>
</span>