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

everything_loaded を取得するにはどうすればよいですか? コンポーネントがすばやくスムーズに描画されるように、すべての投稿とすべてのコメントが読み込まれたことを確認する方法は?

すべてのヘルプは大歓迎です。ありがとうございました

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

少し汚れていますが、Wh​​ileLoading がうまく機能するようになるまで、今のところ必要なことは完了しているはずです。基本的に、ReactiveRecord がそのデータを取得して適用することを認識するためにコンテンツをレンダリングする必要があるため、データが存在するまでレンダリングを禁止するのではなく、表示/非表示を行う必要があります。

于 2016-08-15T13:00:13.470 に答える