当JQuery包含时,Python抛出KeyError

时间:2015-03-11 16:02:36

标签: javascript jquery python

我有下面的代码,我想在html中设置一个变量。出于某种原因,当我删除JQuery时,它可以工作,但是当我把JQuery脚本放进去时,它并没有。我想这可能是因为在加载页面时调用了JQuery,因为如果从按钮调用JQuery,我可以使用它。我已经尝试了%s,%(currentDate)s,{0}然后他们的相关输出,但它们似乎都没有奏效。前两个抛出ValueError: unsupported format character ''' (0x27) at index 952,然后{0}导致KeyError: "\n $('"

class Fitbit(object):
@cherrypy.expose
def index(self):

currentDate = (time.strftime("%d/%m/%Y"))

return """<html>
<head>
    <title>Fitbit</title>
    <link href="/static/css/fitbit.css" rel="stylesheet">
    <script>
            $('document').ready(init);
                function init(){
                $('.bar-percentage[data-percentage]').each(function () {
                    var progress = $(this);
                    var percentage = Math.ceil($(this).attr('data-percentage'));
                    $({countNum: 0}).animate({countNum: percentage}, {
                        duration: 2000,
                        easing:'linear',
                        step: function() {
                        // What todo on every count
                            var pct = '';
                            if(percentage == 0){
                                pct = Math.floor(this.countNum) + '%';
                            }else{
                                pct = Math.floor(this.countNum+1) + '%';
                            }
                        progress.text(pct) && progress.siblings().children().css('width',pct);
                        }
                    });
                });
            };
        </script>
</head>

<body>

<h4>{0}</h4>

</body>

</html>""" .format(currentDate)

#return html
index.exposed = True

如果我删除了JQuery,它肯定能正常工作并显示日期。关于尝试什么的任何其他想法将不胜感激。

1 个答案:

答案 0 :(得分:2)

由于JavaScript中的所有大括号,您遇到了问题。这使format函数混乱。使用templating engine呈现HTML时会更好。

但是,如果您想继续使用当前代码,请尝试将JavaScript / jQuery代码放入其自己的变量中,然后使用format调用将其插入HTML中。

currentDate = (time.strftime("%d/%m/%Y"))
javascript = """
$('document').ready(init);
function init(){
    $('.bar-percentage[data-percentage]').each(function () {
        var progress = $(this);
        var percentage = Math.ceil($(this).attr('data-percentage'));
        $({countNum: 0}).animate({countNum: percentage}, {
            duration: 2000,
            easing:'linear',
            step: function() {
            // What todo on every count
                var pct = '';
                if(percentage == 0){
                    pct = Math.floor(this.countNum) + '%';
                }else{
                    pct = Math.floor(this.countNum+1) + '%';
                }
            progress.text(pct) && progress.siblings().children().css('width',pct);
            }
        });
    });
};
"""

return """<html>
<head>
    <title>Fitbit</title>
    <link href="/static/css/fitbit.css" rel="stylesheet">
    <script>{0}</script>
</head>

<body>

<h4>{1}</h4>

</body>

</html>""".format(javascript, currentDate)