1

我希望有人可以指出在顶级 Reactrb 组件中处理加载状态的最佳方法是通过 Reactive Record 延迟加载数据。

我的目标是让顶级组件显示等待状态，而其子组件获取他们需要渲染的数据，然后快速渲染整个组件。我不希望带有子组件的单独等待状态，因为当要加载大量数据时，这会产生“生涩”的体验。

如果你考虑这个例子：

class PostsWithCommentsList < React::Component::Base

  before_mount do
    state.posts! Post.all
  end

  def everything_loaded?
      #how do I know when all posts and all comments are loaded?
  end

  def render
     div do
        ul do
          state.posts.each do |post|
            li { post.title }
            ul do
              post.comments.each do |comment|
                li { comment.body }
              end
           end
         end
      end if everything_loaded?
    end
  end
end

我如何获得一切加载？检查所有帖子和所有评论是否已加载以便组件快速流畅地绘制的方法？

非常欢迎所有帮助。谢谢

4

1 回答 1

1

ReactiveRecord 有一个功能还没有完成，但它可以派上用场。它被称为 WhileLoading，其目标是能够说如下内容：

def render
  div do
    ul do
      state.posts.each do |post|
        li { post.title }
        ul do
          post.comments.each do |comment|
            li { comment.body }
          end
        end
      end
    end.while_loading do
      # Some kind of loading screen
    end
  end
end

基本上，您会在要在加载时显示某些内容的元素的末尾调用该方法，然后传入您想要显示的内容。在引擎盖下，这只会显示/隐藏元素而不是不渲染。

不幸的是，这还没有完全起作用，但这里是它的使用方法。

after_mount do
  @initial_data_loaded = false
  Element['.content-loading'].hide
  Element['.loading-div'].show
end

def toggle_loading
  return if @initial_data_loaded
  if ReactiveRecord::WhileLoading.quiet?
    Element['.content-loading'].show
    Element['.loading-div'].hide
    @initial_data_loaded = true
  end
end

def render
  div do
    div.content_loading do
      ul do
        state.posts.each do |post|
          li { post.title }
          ul do
            post.comments.each do |comment|
              li { comment.body }
            end
          end
        end
      end
    end
    div.loading_div(style: { display: 'none' }) do
      # Your loading screen
    end
  end.tap { toggle_loading }
end

它有点脏，但这应该可以满足您现在的需要，直到我们让 WhileLoading 正常工作。基本上需要渲染内容，以便 ReactiveRecord 知道获取和应用该数据，因此我们需要进行显示/隐藏，而不是在数据存在之前阻止它渲染。

于 2016-08-15T13:00:13.470 回答