导轨 - 如何在Rails控制器和JavaScript刺激控制器之间传递数据以动态更改视图

Question

我有一个Rails应用程序，其中有一个搜索结果页面，该应用程序根据用户的输入从表单中提取结果。

为了简化导轨控制器方法：

def search_results
  # [...] ActiveRecord queries to get results
  @movies.shuffle!
end

然后，在视图中，我只想显示前三个结果。目前，这是类似的：

<%@movies[0..2].each do |movie|%>
  <div class="row d-flex justify-content-center" data-controller="search-result-card">
    <%# Visual of the card %>
  </div>
<%end%>

我想做的是在此页面上有一个刷新按钮，可以用接下来的三个@movies替换可见的卡，但实际上没有实际重新加载页面。

我已经制定了一个刷新按钮，并且上面有一个数据控制器...但是我不确定如何使用它来更改代码。

<div class="refresh-button" data-controller="refresh">
  <button data-action="click->refresh#next">Refresh</button>
</div>

我不确定我是否需要创建卡片的部分...或者是否有一种方法可以简单地更改嵌入式Ruby，以便＆lt;％@Movie [0..2]。 |％＆gt;变为＆lt;％@tover [3..5]。

我认为渲染并不是可行的，然后隐藏所有结果是可行的，因为可能有成千上万的结果（尽管我可能是错误的，这可能是可以的）。

任何最赞赏的建议！

Answer 1

这听起来像是朴素的分页。

如果可能有成千上万的电影，您将成为成千上万部电影的《标记/HTML》。通过分页，您会一次获得3个记录。甚至可以使用涡轮框架来替换接下来的3个。

但是，如果您真的想做自己的想法，则除了前3张外，还将隐藏所有卡，然后使用刺激来获取下一张或最后三张卡。

测试示例

控制器

class TestController < ApplicationController
  def index
    @movies = Array.new(100) { |e| e = e + 1 }
  end

使用Slim

.bg-white
  div[data-controller="movies"]
    - cnt = 0
    button.btn[data-action="click->movies#last_set"] Last
    button.btn[data-action="click->movies#next_set"] Next
    - @movies.each do |m|
      - if cnt < 3
        div[data-movies-target="movie" class='block'] = "This is movie #{m}"
        - cnt += 1
      - else
        div[data-movies-target="movie" class='hidden'] = "This is movie #{m}"

刺激控制器模板

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="movies"
export default class extends Controller {
  static targets = ['movie']

  connect() {
    this.size = this.movieTargets.length
    this.idx = 0
    // this.idx points to the first current cards (3 for example)
  }

  next_set() {
    let curr = this.idx
    this.idx = curr + 3 // set new idx
    if (this.idx > this.size) {this.idx = this.size - 3}
    for (var i = curr; i <= curr + 2; i++) {
      this.movieTargets[i].classList.add("hidden")
    }
    for (var i = this.idx; i <= this.idx + 2; i++) {
      this.movieTargets[i].classList.remove("hidden")
    }
    // console.log(`idx = ${this.idx}`)
  }

  last_set() {
    let curr = this.idx
    this.idx = curr - 3 // set new idx
    if (this.idx < 0 ) {this.idx = 0}
    for (var i = curr; i <= curr + 2; i++) {
      this.movieTargets[i].classList.add("hidden")
    }
    for (var i = this.idx; i <= this.idx + 2; i++) {
      this.movieTargets[i].classList.remove("hidden")
    }
    // console.log(`idx = ${this.idx}`)
  }

}

只是一个粗略的示例。

编辑在JavaScript上不是很好，并清理了刺激控制器，添加了可变数量的元素以显示和使用页面而不是元素。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ['perPage','movie','status','nextBtn','lastBtn']

  connect() {
    this.size = this.movieTargets.length
    this.page = 0
    this.perPage = Number(this.perPageTarget.innerHTML)
    this.pages = Math.floor(this.size/this.perPage)
    if ((this.size % this.perPage) > 0) {this.pages += 1}
    this.setStatus()
    // this.page points to the current set of cards (3 for example)
  }


  next_set() {
    if (this.page == (this.pages - 1)) {return}
    this.hide()
    this.page += 1
    this.show()
    this.setStatus()
  }

  last_set() {
    if (this.page == 0) {return}
    this.hide()
    this.page -= 1
    this.show()
    this.setStatus()
  }

  hide(){
    let curr = this.page * this.perPage
    let last = curr + this.perPage - 1
    while(curr <= last){
      if (curr >= 0 && curr < this.size) {
        this.movieTargets[curr].classList.add("hidden")
      }
      curr++
    }
  }

  show(){
    let curr = this.page * this.perPage
    let last = curr + this.perPage - 1
    while(curr <= last){
      if (curr >= 0 && curr < this.size) {
        this.movieTargets[curr].classList.remove("hidden")
      }
      curr++
    }
  }

  setStatus(){
    this.statusTarget.innerHTML = `Page ${this.page + 1} of ${this.pages}`
    if (this.page == 0) {
      this.lastBtnTarget.classList.add('hidden')
    }else{
      this.lastBtnTarget.classList.remove('hidden')
    }
    if (this.page == this.pages) {
      this.nextBtnTarget.classList.add('hidden')
    }else{
      this.nextBtnTarget.classList.remove('hidden')
    }
  }
}