#Rails

编程 5 分钟 读完 (约 686 字)

随着现代浏览器性能的提升，前端工程师设计出的交互方式也多种多样。其中瀑布流方式滚动更新加载已经是一种常见的Web前端交互方式了。

然而在Rails中如何实现这样一种随着用户滚动页面就能自动追加内容到页面的方式呢？

有一些现成的Gem可以推荐，例如jquery-infinite-pages和will_paginate_infinite等。不过我觉得它们使用比较复杂，不如自己去实现一个。

本文既然提到最方便，自然是需要用一种最小化改动的方式来实现这样的功能。

具体如何实现，请往下看。

首先假设我们要实现瀑布流式动态更新的对象是Post(或者是Article、News或者其他)，第一步我们需要在Gemfile中加入以下两个Gem：

1
2
gem 'will_paginate'
gem 'bootstrap-will_paginate'

然后执行bundle，接着去修改posts_controller.rb，修改其中的index方法：

1
2
3
4
5
6
7
8
def index
  @posts = Post.all.paginate(:page => params[:page], :per_page => 10)

  respond_to do |format|
    format.html
    format.js
  end
end

这里由于我们增加了js的渲染格式，所以要去views/posts中添加一个index.js.erb模板文件，内容如下:

1
2
3
4
5
6
7
$('#posts_list').append('<%= j render @posts %>');
<% if @posts.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @posts %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

上面的代码通过js定位页面中的posts_list作为要追加元素的目标，所以我们稍微修改一下views/posts/index.html.erb，在其中加入posts_list元素：

1
2
3
4
5
6
7
8

<div id="posts_list">
  <%= render @posts %>
</div>

<div id="infinite-scrolling">
  <%= will_paginate %>
</div>

在这段代码中，我们将@posts集合交给其他模板去渲染了，而这里暂时还没有用来渲染@posts的模板，所以要在views/posts中创建一个_post.html.erb模板文件，内容如下：

1
2
3
4
5
<div>
<h3><%= post.title %></h3>
<p><%= post.content %></p>
<hr/>
</div>

就这么简单，用来输出标题和内容。

最后关键的一步，需要创建一个事件监听器来捕获页面的滚动变化，所以在assets/javascripts/posts.coffee中，加入以下代码：

1
2
3
4
5
6
7
8
9
10

$(document).on "turbolinks:load", ->
  $(window).on 'scroll', ->
    more_posts_url = $('.pagination .next_page a').attr('href')
    if more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
      $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
      $.getScript more_posts_url
      return
    return

如此一来，就实现了通过ajax方式请求原来需要在下一页展现内容，并把内容追加到index.html的文章列表中，也就实现了瀑布流加载了。

一切修改好以后，重启Rails服务，在页面滚动一下试试吧。

本方法参考自https://www.sitepoint.com/infinite-scrolling-rails-basics/

编程 3 分钟 读完 (约 469 字)

系统环境：

  • Ruby: ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
  • Rails: Rails 5.2.2
  • Gem: 2.7.7
  • SQLite: sqlite3 (1.4.0, 1.3.13)

今天在基于上面的环境使用Rails新建项目的时候，报了一个ActiveRecord::ConnectionNotEstablished错误。
根据排查，是由于SQLite3 gem版本问题导致的。
具体的报错内容如下：

1
Puma caught this error: Error loading the 'sqlite3' Active Record adapter. Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile. (LoadError)

页面报错如下：

1
2
3
ActiveRecord::ConnectionNotEstablished
No connection pool with 'primary' found.

后来找到了解决方法，修改Gemfile，将sqlite3的版本降级到1.4.0以下即可。
修改Gemfile：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '< 1.4.0'  # <<修改这里，将sqlite3版本设定为小于1.4.0
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


修改完后执行bundle即可。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×