grunt-kot2js
Grunt task to convert Knockout templates to a string in a JavaScript file for the String Template Engine.
Based on [https://blog.safaribooksonline.com/2014/01/31/using-external-templates-knockout-js/ and https://github.com/rniemeyer/SamplePresentation/blob/master/js/stringTemplateEngine.js](https://blog.safaribooksonline.com/2014/01/31/using-external-templates-knockout-js/ and https://github.com/rniemeyer/SamplePresentation/blob/master/js/stringTemplateEngine.js)
A version of the String Template Engine is included. It's located in grunt-kot2js/lib/stringTemplateEngine.js
.
Usage of the stringTemplateEngine:
function DebugViewModel() {
this.testValues = {foo: 'bar'};
}
stringTemplateEngine.init(koTemplates);
ko.applyBindings(new DebugViewModel(), $('#wrapper'));
See also grunt-kot2html.
Getting Started
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-kot2js --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-kot2js');
Although I recommend using load-grunt-tasks
The "kot2js" task
Overview
In your project's Gruntfile, add a section named kot2js
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
kot2js: {
dev: {
src: 'templates/*.html',
dest: 'templates.js',
namespace: 'foo'
}
}
});
Example output:
(function () {
'use strict';
window.koTemplates = {};
window.koTemplates["main"] = "<div class=\x22rdt\x22 id=\x22rdt\x22></div>";
})();
The path to the template is used as a template ID (in this case "main").
Properties
src
Type: String
Input path. Location of the HTML Knockout Templates. Expects template files to have the .html extension
dest
Type: String
Output path. Location of the generated JavaScript file.
namespace
Type: String
Default value: 'window.koTemplates'
Optional. The variable to which the string array will be assigned. This has to be a global variable.
Usage Examples
Default Options
In this example, the sources are files with the .html extension in the templates
dir and the generated file is templates.js
in the root dir. The namespace is the default window.koTemplates
.
grunt.initConfig({
kot2js: {
dev: {
src: 'templates/*.html',
dest: 'templates.js'
}
}
});
Contributing
Follow the jshintrc settings for the code style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
- 2016-07-07 v0.5.0 merged pull request for paths as template ID.
- 2015-11-03 v0.4.2 merged pull request for namespaces
- 2015-03-25 v0.4.0 added lib/stringTemplateEngine.js
- 2015-03-25 v0.3.0 added unit tests
- 2015-03-24 v0.2.0 input, output and namespace configurable
- 2015-03-24 v0.1.0 initial release
To Do
- When committing got: warning: LF will be replaced by CRLF in test/expected/dev. This means that the unit test will fail.
- Add lintspaces
- Add unit test for stringTemplateEngine