Integrating JS, specifically JQuery via AJAX, was not as much as a challenge as I expected.
I had plenty of trouble with the JS coursework. It didn’t click like ruby. There was too much abstraction everywhere. I was passing functions into functions from other functions that had a value in them, at least I thought they did. But towards the end, and after a couple of Study Sessions, it started to click. I still don’t totally understand which
At first, though, I was flummoxed. Where do I even start? How do you take a working application that you built months ago on a framework and with a language you were studying a year ago and rework it using a language you just learned?
Model. View. Controller.
- We have to rework the Model to work with JS objects.
- We have to change the view to work with JS templating.
- We have to change the logic to work in JS.
So I started with the first thing I knew I had to do — serializers. I created them in the shadow of their model brethren. I created serializers for the objects I knew the application used and set their attributes respective of eachothers within the serializer. These would essentially act as the models I had already created.
I then moved towards the controllers. In order for the JSON to be used in the application, I have to have the application throw JSON when they are looking for it. So I modified the controller of the Parties controller to throw it first. This controller allowed for most versatility within the application, as the crux of the Event Planning application is the Party itself. Because Party had so many relations, most of the application can be accessed through just the information passed along there.
Once I got the application passing JSON, and the correct JSON, I was to move on to the views. I was appending list items and creating lists with my underdeveloped JQuery skills when I started running into weird occurrences — items appearing twice, items disappearing after reload. So I decided to revisit the Learn curriculum and find out where I was going wrong, or at least how to do this in a more sane fashion. That’s when I remembered Handlebars.js!
I quickly head over there and began moving all my views to Handlebars templates. After poking around and figuring out the syntax, it all became pretty easy, and was much like writing shortcodes in Rails. After a few tweaks, the individual show and index pages were completely written in Handlebars templates, including a new “Add Dish” template that was created via JS and a couple of Handlebar Helpers. Soon there after, I loaded up WordPress and started writing this blog.
All in all, though this project took me the longest out of any of the projects I encountered, this was by far the easiest. It sounds counter intuitive, but it came down to just doing the work when I had time, and not when I “figured it out” in some brain storming session, like many of the others. It was just work that had to be done, so I had to fit it into real life.