Sky Blue Sofa Blog Using the Arbiter.js Library - Sky Blue Sofa Blog

Using the Arbiter.js Library

Posted by Dave Rogers // February 27, 2014 // in Blog // 0 Comments

27-02-2014_2034_602.gif

As I have been working toward the newest version of Page List+, one of my most popular concrete5 addons, I realized that it was going to be a much bigger job than I initially thought. The reason in one word: Ajax.

In this new version, you'll be able to setup your Page List+ blocks to refresh without reloading the page. That, in and of itself, wasn't the issue. The issue was compatibility with another addon that I provide, Infinite Scroller. You see, these two addons must be closely coupled in order to work, but some of the fixes that I came up with for Infinite Scroller were actually in the Page List+ code. Very bad design.

I needed to decouple the code from one addon and place it in another. One of my past colleague's projects, Arbiter.js, came up in my research on the subject. You can think of it in two different ways:

  • One piece of the page can 'publish' a message to any other part of the page can 'listen' to.
  • One piece of the page can 'trigger' an event that another part of the page can respond to.

A Real World Example of how Arbiter.js Works

In the new versions of these addons, I'm using Arbiter.js like this:

Setup by the Site Owner

  1. The site owner creates two Page List+ blocks. One only uses the 'form' functionality. The other uses only the 'results' functionality. (This is a really nice way of 'decoupling' the functionality of the form and a custom results template.)
  2. The first block is setup to 'submit via ajax' and the second is set to 'receive via ajax'.

Used by the Site Visitor

  1. The visitor changes the values in the form and submits it
  2. Behind the scenes, this is what happens:
    1. The Page List+ 'form' block publishes a message that the form was submitted and sends along the form data
    2. The Page List+ 'results' block is listening to those messages, so it gets the form data and sends it back to the server to get a list of corresponding pages.
    3. When the 'results' block gets the list of pages, it displays them. Then it, in turn, publishes a message that the results are now shown.
    4. The Infinite Scroller block is listening to the message from the results block and resets itself.

It was fun to get this working. And surprisingly, the code for Arbiter.js is pretty small. Perhaps you'll be able to use it in an upcoming project.

About the Author

Dave Rogers

Dave is the founder of Sky Blue Sofa Web Design. He enjoys working out, spending time with his wife and dogs and programming. He grew up and currently resides in the Illinois Quad Cities. You can find his personal blog at strength/reliance.com.

View Profile »

Comments

You must be logged in to leave a reply. Login »