我一直在寻找关于如何创建进度条的互联网，通知用户他们完成了多少工作。我理解Bootstrap's website.上显示的HTML部分但是，我不明白我应该如何使用view code api中检索到的用户数据（表示已采用使用JavaScript来显示用户进度的进度条。
任何帮助/解释（你的思考过程是什么？有没有这方面的好教程？）非常感谢这个菜鸟！我想要保持最好的练习和表现，因为我还在学习。谢谢！
我正在查看有user input更改进度条（不太正确）的堆栈问题，time incrementation，另一个使用checkboxes来更改进度条（焦点是JS代码）这里）。
目前正在使用：Python 2.7，Pyramid（Web框架），Boostrap / Jinja2模板
查看代码：
@view_config(route_name='assessments', request_method='GET', renderer='templates/unique_assessments.jinja2', permission='create')
def view_unique_microseries_group(request):
logged_in_userid = authenticated_userid(request)
if logged_in_userid is None:
raise HTTPForbidden()
all_assessments = api.retrieve_assessments() #all assessments in a list
#url = HTTPSeeOther(location=request.route_url('microseries'))
return {'logged_in': logged_in_userid, 'all_assessments': all_assessments}
@view_config(route_name='microseries', request_method='GET', renderer='templates/assessments.jinja2', permission='create')
def view_microseries_subseries(request):
logged_in_userid = authenticated_userid(request) #Authenticated User
if logged_in_userid is None:
raise HTTPForbidden()
microseries = int(request.matchdict['id']) #grabs class no. from link in assessments
microseries_list = api.retrieve_assessment(microseries=microseries)
#print 'microseries_list', microseries_list #prints all the matching number of microseries
all_assessments = api.retrieve_assessments() #all assessments in a list
user_results = api.retrieve_assessment_results() #all user results in a list
completed_assessments = []
pending_assessments = []
for assessment in all_assessments:
if assessment is None: # assumes None
continue
found_assessment_result = False
for result in user_results:
if result.owner.username == logged_in_userid and result.assessment == assessment:
found_assessment_result = True # assign Boolean statement
break # no need to check further
if found_assessment_result:
completed_assessments.append(assessment)
else:
pending_assessments.append(assessment)
message = 'Completed'
return {'completed_assessments': completed_assessments, 'pending_assessments': pending_assessments, 'logged_in': logged_in_userid, 'message': message, 'all_assessments':all_assessments, 'microseries_list': microseries_list}
主页的HTML显示整个课程目录 模板： unique_assessments.jinja2
<!-- Stats Gallery Section with Progress bar in each thumbnail-->
<div class="container">
<div class= 'gallery'>
<div class="row">
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/1">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 1</h4>
<p class="tag">Contains Episodes 1A-1F </p>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 100%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/2">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 2</h4>
<p class="tag">Contains Episodes 2A-2E </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> 20%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/3">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 3</h4>
<p class="tag">Contains Episodes 3A-3G </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 60%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/4">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 4</h4>
<p class="tag">Contains Episodes 4A-4E </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 80%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
<div class="col-sm-8 col-md-3 ">
<div class="thumbnail">
<a href="{{request.application_url}}/microseries/5">
<img src="{{request.static_url('img.png')}}" alt="Training" class="img-responsive" style="width: 200px; height: 100px;"/>
</a>
<h4>Video Series 5</h4>
<p class="tag">Contains Episodes 5A-5G </p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 80%
</div>
</div>
<p class="text_column"></p>
</div>
</div><!-- /.col-->
</div><!-- /.row-->
</div><!-- Gallery Container Ends -->
JS代码： 不确定如何使其与来自视图代码的数据进行交互
答案 0 :(得分：2)
您不需要任何JavaScript来显示进度条。当用户在页面上更改某些内容而无需重新加载页面时，您可能需要一些JavaScript来更新进度条 - 据我所知，这不是您的情况。
进度条基本上是两个嵌套的div;内部div用CSS着色，宽度设置为父级宽度的给定百分比。您所需要的只是在模板中生成正确的标记。
<div class="progress">
<div class="progress-bar" ... style="width: {{course_completion_percent}}%;">
{{course_completion_percent}}%
</div>
</div>
（当然，在您的视图函数中，您需要计算course_completion_percent变量并将其传递给模板）。这样的事情可以做到：
course_completion_percent = 100.0 * len(completed_assessments) / len(all_assessments)
return {
...
'course_completion_percent': course_completion_percent,
}