Skip to content

Usage gon watch

Jump to bottom Edit New page
gazay edited this page Jul 25, 2012 · 11 revisions

Use of gon.watched allows you to render data in your variable without reloading of a page. This functionality can be used to refresh data with cycle with n-milliseconds periods or just once, when it's is called by some action.

Fun samples without details: unix top

Simple example which allows you renew count of users each second on page without reloading:

  1. Instead of just gon.variable_name you should use gon.watch.variable_name:

    app/controllers/home_controller.rb

    def index
  @users_count = User.count
  gon.watch.users_count = @users
end

  2. You should pass option :watch => true to include_gon helper:

    app/views/layouts/application.html.erb

    <head>
  <title>some title</title>
  <%= include_gon(watch: true) %>
  <!-- include your action js code -->
  ...

  3. Part of your index page where displayed count of users:

    app/views/home/index.html.erb

    ...
<div id='users-counter'>
  <%= @users_count %>
</div>
...
<a href='#' id='stop-renewing'>
  Stop renewing
</a>
...

  4. In your js file (or coffee or whatever) you can call gon.watch function which accepts next parameters:

    gon.watch(name_of_variable, options, callback)
    • name_of_variable - name of variable from controller (in gon.watch.a = 123 it will be 'a')
    • options - in current realization all options are optional:
      • interval - this option allows you to make cycle for gon.watch. Each n milliseconds which you pass with this option gon.watch will make ajax request and call callback after success. You can stop executing this cycle by calling gon.unwatch with same name and callback as for gon.watch.
      • method - this method will be used in ajax request
      • url - url for ajax request
    • callback - function, which will be called with data from success ajax response. It is identifier for cycle in case when you use option interval and want to stop this cycle after a while. Or when you want to renew one variable with different options.

    app/assets/javascripts/home.js.coffee

    renewUsers = (count) ->
  $('#users-counter').text(count)

gon.watch('users_count', interval: 1000, renewUsers)

$('#stop-renewing').click ->
  gon.unwatch('users_count', renewUsers)
  return false
Add a custom footer
Add a custom sidebar
Clone this wiki locally