Pre-parse Ractive templates for use in ExtJS or other MVC projects

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-ractive-parse --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-ractive-parse');

In your project's Gruntfile, add a section named ractive_parse to the data object passed into grunt.initConfig().

grunt.initConfig({
  ractiveparse: {
    options: {
      // Task-specific options go here.
    },
    // Your src directory goes here. 
    // If you have more than one direcotry or want to specify specific files use this syntax ['/one', 'two.html']
    src: '', 

    // Your destination file goes here. Note: you may have only one destination file for each ractive_parse
    dest: ''
  },
});

Type: 'String' Default value: NA

A string value that is used set the name of the app. Note: this field is required if you use the 'extjs' type

Type: String Default value: 'javascript'

A string value that is used to identify the syntax of the parsed templates file. Options are 'javascript' || 'extjs'

Type: String Default value: ''

A string value path that is used to identify folder names to skip when creating the ExtJS class name.

Type: Object Default value: ''

An object to allow you to set custom properties on your final compiled templates file.

In this example, the default options are used to parse the templates directory. This will loop through all folders in the templates directory and create a single templates javascript file of pre-parsed Ractive templates.

grunt.initConfig({
  ractiveparse: {
    options: {},
    src: 'templates/*',
    dest: 'code/templates.js'
  },
});

In this example, custom options are used to do set the final javascript template file as an Sencha ExtJS class. The appName must match the name of your ExtJS applicaiton. The class path will automatically be set using the appName + the path to your final destination template.

Example

Gruntfile.js

grunt.initConfig({
  ractiveparse: {
    options: {
      appName: 'MyApp',
      type: 'extjs',
      ignorePath: 'app/',
      configCls: {
        singleton: true
      }
    },
    src: 'templates/*',
    dest: 'app/templates/templates.js'
  },
});

File Structure

MyApp/
  |- index.html

  |- app/
    |- templates/

  |- templates/
    |- temp1.html
    |- temp2.html
    |- one/
      |- onetemp1.html
      |- onetemp2.html

MyApp/app/templates/templates.js

Ext.define('MyApp.templates.Templates', {
  
  singleton: true,

  templates: {
    temp1 : [{"t":7,"e":"div","a":{"class":"box"},"f":[{"t":2,"x":{"r":["box","content"],"s":"${0}-${1}"}}]}],
    temp2 : [{"t":7,"e":"button","a":{"class":"btn"},"f":[{"t":2,"x":{"r":["button","label"],"s":"${0}-${1}"}}]}],
    one: {        
        onetemp1 : [{"t":7,"e":"div","a":{"class":"box"},"f":[{"t":2,"x":{"r":["box","content"],"s":"${0}-${1}"}}]}],
        onetemp2 : [{"t":7,"e":"button","a":{"class":"btn"},"f":[{"t":2,"x":{"r":["button","label"],"s":"${0}-${1}"}}]}]
    }
  }
})

In lieu of a formal styleguide, take care to maintain the existing coding style. Use the .editorconfig file associated with this project and add unit tests for any new or changed functionality. Lint and test your code using Grunt and grunt-contrib-jshint. Please see the Contributing to grunt guide for information on contributing to this project.

• 2014-05-16   v0.1.0   Initiated project.
• 2014-05-16   v1.0.0   Initial release of project.
• 2014-05-16   v1.2.0   Published to NPM
• 2014-05-16   v1.3.0   Added additional build options