首页 \ 问答 \ 金字塔和变色龙中的ajax小部件(ajax widgets in pyramid and chameleon)

金字塔和变色龙中的ajax小部件(ajax widgets in pyramid and chameleon)

 我希望能够轻松地在服务器端创建由变色龙和金字塔支持的Ajax'小部件'。  
 金字塔是否提供任何管道代码，使编写小部件变得容易？  
 我目前的方法是使用home.pt作为渲染器的主视图。 home.pt使用一个宏base.pt来定义页面结构，并提供一个home.pt插槽来填充。 base.pt也使用我编写的登录“小部件”宏（请参阅下面的account_login_widget.pt）。  
 从理论上讲，这听起来很棒......我有一个可重复使用的登录小工具，我可以在很多页面上使用，但是我目前的方法不能很好地工作。 我的登录窗口小部件在其渲染器（服务器需要定义）中使用像$ {username}这样的变量。 我希望登录小部件及其渲染尽可能独立。 但以我目前的做法，主视图代码需要知道登录窗口小部件的需求，并在字典中提供用户名，表单提交和其他变量。 绝对不好...  
 我觉得我接近正确的想法，但错过了一些东西......  
 有什么想法吗？  
 base.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>
 
 home.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>

I would like to be able to easily create ajax 'widgets' backed by chameleon and pyramid on the server side. 
Does Pyramid provide any plumbing code that would make writing widgets easy? 
My current approach is I have a home view which uses home.pt as the renderer. home.pt uses a macro base.pt which defines the page structure and provides a slot for home.pt to fill. base.pt also uses a login 'widget' macro that I have written (see: account_login_widget.pt below). 
In theory, this all sounds great...I have a reusable login widget that I can use in many pages, but my current approach doesn't work very well. My login widget uses variables like ${username} in its renderer (which the server needs to define). I want the login widget and its rendering to be as independent as possible. But with my current way of doing things, the home view code needs to be aware of the login widget's needs and provide username, formrender and other variables in the dictionary. Definitely not good... 
I feel like I'm close to the right idea, but missing some things... 
Any thoughts? 
base.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>
 
home.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>

原文：https://stackoverflow.com/questions/8063012

更新时间：2024-03-11 06:03

最满意答案

 好。 问题在于计数器变量。 您不能在Apps脚本中使用全局变量。 有关更多信息，请参阅此答案 。 您可以使用ScriptProperties或CacheService作为替代方案。  
var ss = SpreadsheetApp.getActiveSpreadsheet();
//Set up the Menu bar 
function onOpen() {
//  Logger.clear();
  var menuEntries = [ {name: "demo", functionName: "myFunction"}];
  ss.addMenu("Demo", menuEntries);
  // Store your counter in CacheService as a string.
  CacheService.getPrivateCache().put('counter','1',3600); 
}

function myFunction() {

  var myapp = UiApp.createApplication().setHeight(430).setWidth(800);;
  var button = myapp.createButton("Clicky");
  var myhandler = myapp.createServerHandler("secondfunction");
  var myhandler = button.addClickHandler(myhandler)
  myapp.add(button);
  ss.show(myapp);
}

function secondfunction()
{
   var cache = CacheService.getPrivateCache();
   var counter = parseInt(cache.get('counter'));
   counter ++; 
   cache.put('counter', counter.toString());
   Logger.log(counter);

}

OK. The problem is with the counter variable. You cannot use global variables that way in Apps Script. See this answer for more information. You can use ScriptProperties or CacheService as an alternative.  
var ss = SpreadsheetApp.getActiveSpreadsheet();
//Set up the Menu bar 
function onOpen() {
//  Logger.clear();
  var menuEntries = [ {name: "demo", functionName: "myFunction"}];
  ss.addMenu("Demo", menuEntries);
  // Store your counter in CacheService as a string.
  CacheService.getPrivateCache().put('counter','1',3600); 
}

function myFunction() {

  var myapp = UiApp.createApplication().setHeight(430).setWidth(800);;
  var button = myapp.createButton("Clicky");
  var myhandler = myapp.createServerHandler("secondfunction");
  var myhandler = button.addClickHandler(myhandler)
  myapp.add(button);
  ss.show(myapp);
}

function secondfunction()
{
   var cache = CacheService.getPrivateCache();
   var counter = parseInt(cache.get('counter'));
   counter ++; 
   cache.put('counter', counter.toString());
   Logger.log(counter);

}

金字塔和变色龙中的ajax小部件(ajax widgets in pyramid and chameleon)

最满意答案

相关问答

Google Apps脚本和外部API(Google Apps Script and External API)[2023-06-04]

每2个月运行一次的Google Apps脚本触发器无效(Google Apps Script trigger to run every 2 months is not working)[2022-04-07]

按钮仅在Google Apps脚本中触发一次(Button firing only once Google Apps Script)[2023-07-18]

Google Apps脚本中的标准Javascript(Standard Javascript in Google Apps Script)[2019-12-24]

触发Google Apps脚本中的importHTML(Trigger importHTML in Google Apps Script)[2022-09-10]

是否可以从另一个脚本中读取Google Apps脚本的内容(Is it possible to read the contents of a Google Apps Script from another Script)[2022-02-12]

具有即时时间驱动触发功能的Google Apps脚本(Google Apps Script with Immediate Time-Driven Trigger)[2022-03-06]

Google Apps脚本 - MailApp(Google Apps Script - MailApp)[2022-12-22]

我的Google Apps脚本在哪里(Where is my Google Apps Script)[2024-01-13]

Google Apps脚本中的JSON(JSON in Google Apps Script)[2023-08-14]

相关文章

最新问答