Code Monkey home page Code Monkey logo

emblem.js's Introduction

Build Status

LOOKING FOR NEW MAINTAINER OF EMBLEM.JS

Please see this issue for information.

Emblem.js

Emblem.js is an indentation-based templating language that compiles down to the Handlebars.js runtime. It is therefore:

  1. Efficiently/easily precompilable
  2. Compilable in the browser
  3. Fully compatible with Ember.js's auto-updating templates (with Ember-targeting/friendly syntax)

Emblem's syntax most closely resembles that of the Slim templating language. Please see the Emblem docs site for a full explanation of the syntax.

Also check out the Embercast on Emblem.js

Handlebars Version Dependencies

Updated: July 2013

In the push to Handlebars 1.0.0, some changes were made to the Handlebars internals that broke Emblem, but Emblem's been fixed as of July 1, 2013. Here are the versions you should be using:

  • Handlebars 1.0.0: Use Emblem >= 0.3.0
  • Handlebars <= 1.0.0.rc4: Use Emblem <= 0.2.9

Query params

Updated: March 2014

Handlebars >= 1.3.0 is required to use query params.

Emblem uses the following syntax: = link-to 'index' (query-params foo="wat")

Ember query params documentation

Syntax Examples

Emblem.js Syntax

Using Emblem in your application

You can use Emblem to compile either to vanilla Handlebars or Emberized Handlebars. Let's assume you're compiling to Emberized Handlebars for use with an Ember app.

Compiling in the Browser

Follow the pattern in this JSBin:

  1. Include Handlebars
  2. Include Emblem
  3. Include Ember

If you have a recent enough version of Ember, all the Emblem code you put into <script type="text/x-emblem"> tags will get compiled and stripped out of the DOM. If you're using an out-of-date Ember, you can trigger this to happen manually before app initialization via

Ember.onLoad('application', Emblem.compileScriptTags);

Via Rails 3.1+

Add the following to your Gemfile:

gem 'emblem-rails'

emblem-rails presently depends on ember-rails. With these two gems, any templates ending in .emblem will be (pre)compiled with Emblem.js.

Also, check out the demo app which uses the above configuration.

Updates to Emblem syntax do not require an update to emblem-rails. To update to the latest Emblem, you can run:

bundle update emblem-source

All Emblem Plugins

  1. emblem-rails
  2. barber-emblem, a Precompilation library for Ruby (used in ember-rails)
  3. emblem-brunch, Emblem support for Brunch.io
  4. Mimosa (support for Emblem since v 0.10.1)
  5. grunt-emblem, Emblem support for Grunt (and Yeoman)
  6. gulp-emblem, Emblem support for gulp

Building Emblem.js

Clone the repo, then run:

npm install
grunt

This will also automatically run the test suite.

Syntax Highlighting

Check out vim-emblem for Vim editor support for Emblem.

Otherwise, for now, please refer to syntax highlighting solutions for Slim, which is not much different from Ember's. At some point, we'll have something even more custom tailored to Emblem (feel free to take a swing at it and send in a PR).

Reporting Bugs

If you find a bug in Emblem syntax, please try to reproduce it in its simplest form with this JSBin before reporting an issue, which will help me nail down the source of the issue.

Bitdeli Badge

emblem.js's People

Contributors

machty avatar artursvonda avatar lai avatar drewcovi avatar indream avatar peaches avatar bitdeli-chef avatar clupprich avatar denisnazarov avatar xcskier56 avatar globegitter avatar buschtoens avatar nopik avatar mmun avatar botandrose-machine avatar raytiley avatar tricknotes avatar

Watchers

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.