Giter Site home page Giter Site logo

haml_assets's Introduction

Haml for JavaScript templates with the asset pipeline

Writing JavaScript templates for Backbone.js (or other frameworks) in your app? Would you like to use haml in the asset pipeline?

This gem adds haml support to the Rails 3.1+ asset pipeline. You will also need a gem that creates a compiled JavaScript template like hogan_assets or handlebars_assets as well.

Installing

Add this to your Gemfile

gem 'haml_assets'

Upgrading from 0.0.x

haml_assets now works with the haml gem. Please update your gemfile to only require haml_assets..

Writing your JavaScript templates

Templates directory

You should located your templates under app/assets; we suggest app/assets/templates. In your JavaScript manifest file (for example application.js), use require_tree

//= require_tree ../templates

The template file

Inside your templates directory, add your template file. The file should be named as follows

your_template_name.mustache.haml

The asset pipeline will then generate the actual JavaScript asset

  1. Convert your haml to HTML
  2. Compile the HTML to an mustache Javascript template using hogan_assets

Important! The asset pipeline is not invoking a controller to generate the templates. If you are using existing view templates, you may have to edit templates to remove some references to controller helpers.

Helpers

All the ActionView and route helpers are available in your template. If you use form_for and the related helpers, you should use the new object style, even if you are writing an edit template, for example

= form_for :contact, url: "javascript_not_working", html: {:class => :edit_contact, :method => :put} do |f|
  = f.label :name, "Name"
  = f.text_field :name, class: 'text required', autofocus: true, value: '{{name}}'

Rendering partials

You can render partials within your views. Because this is hacked in, you can nest your partials as normal, but they must have a recognized format such as html. For example

shared/_timestamps.html.haml

A partial will become a part of whatever template you are rendering, so make sure that you are generating the correct markup. For example, do not include an embedded coffeescript partial inside an embedded javascript template.

Contributing

Once you've made your great commits:

  1. Fork
  2. Create a topic branch - git checkout -b my_branch
  3. Push to your branch - git push origin my_branch
  4. Create a Pull Request from your branch
  5. That's it!

Authors

  • Les Hill : @leshill
  • Wes Gibbs : @wgibbs

Contributors

  • Eugene Pimenov (@libc) : Rendering partials
  • Raphael Randschau (@nicolai86) : Render partials

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.