Code Monkey home page Code Monkey logo

handlebars_routes's Introduction

Handlebars Routes

Installing

Bundle it

gem 'handlebars_routes', '~> 0.0.1'

Sprockets require it (in app/assets/javascripts/application.(js|coffee) for example):

//= handlebars_routes

The link_to helper uses underscore.js templating and assumes you have put it into "mustache mode"

# Setup underscore's templating to use Mustache style templates
_.templateSettings =
  interpolate: /\{\{(.+?)\}\}/g

What it does

Its really annoying not to have all your Rails routes on the client side especially when you're doing Javascript templating. This gem aims to fix that by dumping your rails routes into a rails_routes object in javascript.

I've added my Handlebars Helpers router and link_to. The link_to helper uses the router helper to create links in Handlebars templates very much like creating links in Rails templates.

The router will traverse your object looking for the right attributes to put into the route. You could also use these routes in Backbone models' urls, haven't tried it yet but its a thought.

Examples are probably better eh?

Given the Rails routes:

resources :items do
  resources :products
end

Given the data (a Backbone like object):

item = { attributes: {
           id: 42, 
           product: {id:24, title: 'Pugs not Drugs'}, 
           item_code: "PUGS", 
           created_at:'11/11/2011'      
          }
       }

And the template item/show.jst.hbs (notice the triple-stache around link_to). "item_product" is the route that Rails provided. The list of routes are stored in the rails_routes global javascript object. Take a look at it in Inspector to find specific routes.

<tr>
  {{#attributes}}
    <td>{{{link_to product.title "item_product"}}}</td>
    <td> {{item_code}}  </td>
    <td> {{created_at}}</td>
  {{/attributes}}
</tr>

And this coffeescript Backbone View:

class ItemView extends Backbone.View
  # ...

  render: =>
    $(@el).prepend JST['item/show'] @model

  # ...
end

This awesome looking html will be produced!!!

<tr>
  <td><a href="/items/42/products/24">Pugs not Drugs</a</td>
  <td>PUGS</td>
  <td>11/11/2011</td>
</tr>

handlebars_routes's People

Contributors

ubermajestix avatar

Watchers

Everlater avatar  avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.