Javascript 模板语言和ajax小部件
关于ajax小部件,我有一个非常棘手的问题。这实际上是我刚才问的一个问题的延伸: 如果您查看这个问题和account\u login\u widget.pt文件的内容,您将看到“widget”使用类似${username}的语法。这同样适用于一个页面上只有一个登录小部件的登录小部件,但如果一个页面上可能存在多次的小部件尝试使用这种“小部件模式”,那么一切都会变得一团糟 现在我想创建一个ajax切换按钮。按钮应该是可配置的:按钮的文本可以根据其使用的页面进行更改,并且回调代码也应该可以更改…同样取决于页面。此外,多个切换按钮应该能够存在于同一页面上 2个问题:Javascript 模板语言和ajax小部件,javascript,python,ajax,pyramid,chameleon,Javascript,Python,Ajax,Pyramid,Chameleon,关于ajax小部件,我有一个非常棘手的问题。这实际上是我刚才问的一个问题的延伸: 如果您查看这个问题和account\u login\u widget.pt文件的内容,您将看到“widget”使用类似${username}的语法。这同样适用于一个页面上只有一个登录小部件的登录小部件,但如果一个页面上可能存在多次的小部件尝试使用这种“小部件模式”,那么一切都会变得一团糟 现在我想创建一个ajax切换按钮。按钮应该是可配置的:按钮的文本可以根据其使用的页面进行更改,并且回调代码也应该可以更改…同样取
<script type="text/javascript">
// plugin implementation
(function($) {
$.fn.create_ajax_toggle_button = function(csrf, name, toggle_on, url, on_text, off_text) {
return this.each(function() {
var anchor = $('<a></a>');
anchor.appendTo(this);
$(anchor).button();
$(anchor).toggle_ajax_button_text(toggle_on, on_text, off_text);
$(anchor).click(function(e) {
var form_data = '_csrf=' + csrf + '&name=' + name + '&toggle_on=' + toggle_on;
$.post(url, form_data, function(response) {
$.fn.toggle_ajax_button_text();
});
});
});
};
$.fn.toggle_ajax_button_text = function(toggle_on, on_text, off_text) {
if (toggle_on == 'True') {
$(this).toggleClass('ui-state-active');
$(this).text(on_text);
} else {
$(this).text(off_text);
}
};
})(jQuery);
// Define the entry point
$(document).ready(function() {
// YUCK!!! I really shouldn't be/can't using ${name} templating
// syntax like this. Doing this means the JS code needs to be
// loaded over and over again for each item in the list. This
// just doesn't work. :-(
$('.ajax_toggle_button_div_${name}').create_ajax_toggle_button('${csrf}', '${name}', '${toggle_on}', '${url}', '${on_text}', '${off_text}');
});
</script>
<div class="ajax_toggle_button_div_${name}"></div>
//插件实现
(函数($){
$.fn.create\u ajax\u toggle\u button=函数(csrf、名称、开关打开、url、打开文本、关闭文本){
返回此值。每个(函数(){
var-anchor=$('');
锚。附于(本);
$(锚定).button();
$(锚)。切换\u ajax\u按钮\u文本(切换\u打开、打开\u文本、关闭\u文本);
$(锚定)。单击(函数(e){
var form_data=''_csrf='+csrf+'&name='+name+'&toggle_on='+toggle_on;
$.post(url、表单数据、函数(响应){
$.fn.toggle_ajax_button_text();
});
});
});
};
$.fn.toggle_ajax_按钮_文本=函数(切换打开、打开、关闭_文本){
如果(切换_on=='True'){
$(this.toggleClass('ui-state-active');
$(此).text(在文本上);
}否则{
$(此).text(关闭文本);
}
};
})(jQuery);
//定义入口点
$(文档).ready(函数(){
//糟糕!!!我真的不应该/不能使用${name}模板
//这样做意味着JS代码需要
//为列表中的每个项目反复加载。此
//就是不管用-(
$('.ajax_toggle_button_div_${name}')。创建_ajax_toggle_button('${csrf}','${name}','${toggle_on}','${url}','${on_text}','${off text}');
});
谢谢!我觉得你只是为了一个like按钮做了太多的工作,我讨厌javascript,所以我尽量避免使用它,尤其是在文档加载方面,因为它滞后于用户的浏览器。我将发布我用于“订阅”的内容,希望它能在某种程度上帮助你 在控制器中,我有一个创建订阅按钮的模板。我没有更改单个按钮上的名称,而是创建两个按钮,其中一个隐藏(或禁用)。这应该不会比您当前所做的花费太多时间。使用Mako(不熟悉变色龙),模板功能是:
<%def name="subscribe(post)">
% if request.user:
<% subscribe = Bookmark_C.check_subscribed(request.user.id, post.id) %>
<span class="pstnm">${Bookmark_C.get_num_subscribers(post.id)}</span>
<span class="pstbtn${' hide' if subscribe else ''}" id="sub_${post.base36}" onclick="subscribe(this)">subscribe</span>
<span class="pstbtn${' hide' if not subscribe else ''}" id="unsub_${post.base36}" onclick="unsubscribe(this)">unsubscribe</span>
% endif
</%def>
我有基本相同的取消订阅功能。请注意我是如何从按钮的ID属性接收帖子ID的。/api/subscribe/和/api/unsubscribe/route只接受一个参数ID,并使request.user使用该ID订阅帖子。如果request.user或_csrf不存在,这些路由将不起作用
我的版本短得多,而且确实有效。希望这对你有所帮助
对于Like vs Follow,我将编写两个模板和两组javascript函数,假设它们使用完全不同的控制器。如果您试图复制Facebook,其中Like、Subscribe和Follow都是一样的,那么您需要做的就是让模板允许不同的文本:
<%def name="subscribe(post, subtitle='subscribe', unsubtitle='unsubscribe')">
...
<span ...>${subtitle}</span>
<span ...>${unsubtitle}</span>
</%def>
...
${副标题}
${unsubtitle}
我觉得你只是为了一个like按钮做了太多的工作,我讨厌javascript,所以我尽量避免使用它,尤其是在文档加载方面,因为它滞后于用户的浏览器。我将发布我用于“订阅”的内容,希望它能在某种程度上帮助你
在控制器中,我有一个创建订阅按钮的模板。我没有更改单个按钮上的名称,而是创建两个按钮,其中一个隐藏(或禁用)。这应该不会比您当前所做的花费太多时间。使用Mako(不熟悉变色龙),模板功能是:
<%def name="subscribe(post)">
% if request.user:
<% subscribe = Bookmark_C.check_subscribed(request.user.id, post.id) %>
<span class="pstnm">${Bookmark_C.get_num_subscribers(post.id)}</span>
<span class="pstbtn${' hide' if subscribe else ''}" id="sub_${post.base36}" onclick="subscribe(this)">subscribe</span>
<span class="pstbtn${' hide' if not subscribe else ''}" id="unsub_${post.base36}" onclick="unsubscribe(this)">unsubscribe</span>
% endif
</%def>
我有基本相同的取消订阅功能。请注意我是如何从按钮的ID属性接收帖子ID的。/api/subscribe/和/api/unsubscribe/route只接受一个参数ID,并使request.user使用该ID订阅帖子。如果request.user或_csrf不存在,这些路由将不起作用
我的版本短得多,而且确实有效。希望这对你有所帮助
对于Like vs Follow,我将编写两个模板和两组javascript函数,假设它们使用完全不同的控制器。如果您试图复制Facebook,其中Like、Subscribe和Follow都是一样的,那么您需要做的就是让模板允许不同的文本:
<%def name="subscribe(post, subtitle='subscribe', unsubtitle='unsubscribe')">
...
<span ...>${subtitle}</span>
<span ...>${unsubtitle}</span>
</%def>
...
${副标题}
${unsubtitle}
感谢您的详细回复。这比我试图实现的目标要简单一点,但我最终可能会走这条路线。感谢您的详细回复。这比我试图实现的目标要简单一点,但我最终可能会走这条路线。