Question

我是一名AngularJS初学者，我正在尝试构建一个小型Rails应用程序，该应用程序在一组线程中执行某些操作。根据用户操作，可以同时运行任意数量的并发线程。

该应用程序在其他地方使用AngularJS和Bootstrap，看起来像是一组很好的库，用于实现进度条以跟踪每个活动线程的进度。但是，我不完全确定如何维护这些进度条：在每个线程进行时更新它们，以及如何在创建和终止线程时从我的页面添加和删除它们。我在AngularJS和Bootstrap API页面中搜索过，但老实说，我不是一个非常强大的Web开发人员，所以JS并不是我的强项。

有人能够指出我正确的方向来学习如何完成这些行动吗？谢谢！

[编辑]我认为发布一部分代码试图在页面加载时至少加载这些进度条会很有帮助。以下内容来自页面的.html.erb文件：

<div id="active_threads">
        <%= $active_threads.each do | active_thread | %>
            <div class="progress progress-striped active">
                <div class="progress-bar"  role="progressbar" aria-valuenow="<%= active_thread.progress %>" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                    <span class="sr-only"><%= active_thread.to_s %></span>
            </div>
        </div>
    <% end %>
</div>

这里，$active_threads是另一个.rb文件中维护的数组，其中包含所有活动线程的列表。这些线程在创建时添加到数组中，并在它们终止之前从中删除。这段代码不起作用;没有进度条加载，我可以验证$active_threads中有条目。我不确定是什么问题。

Answer 1

有许多模式可以做到这一点，例如websockets，服务器发送事件，永久帧和长轮询。 Websockets是最现代的解决方案，但旧版浏览器或服务器可能不支持。

大多数websocket框架将尝试使用websockets，如果不支持websockets，则会自动回退到其他选项之一。我不使用ruby所以我不熟悉那里最常用的websocket框架 - 可能是https://github.com/websocket-rails/websocket-rails？

编辑：使用您发布的代码，一旦该代码在服务器上运行并发送到客户端，就无法更改。没了。上面的所有解决方案都是在客户端呈现页面后向服务器发送更多请求，以便服务器可以告诉页面何时进行更新。

AngularJS：动态维护进度条列表

1 个答案: