Skip to content

Instantly share code, notes, and snippets.

@bernharduw
Forked from mikehedman/gist:1969ce420e2413226ec3
Last active August 29, 2015 14:12
Show Gist options
  • Save bernharduw/61fa07c4d92d2c4f1766 to your computer and use it in GitHub Desktop.
Save bernharduw/61fa07c4d92d2c4f1766 to your computer and use it in GitHub Desktop.
// /common/core/ampersand-input-view-dust.js
/**
* Extends the Ampersand InputView class to make it work with Dust templates
*/
/*global dust*/
var InputView = require('ampersand-input-view');
var InputViewDust = InputView.extend({
template: 'includes.formInput',
render: function () {
var self = this;
dust.render(self.template, self, function (err, out) {
if (err) {
console.error(err);
}
self.template = out;
InputView.prototype.render.call(self);
});
}
});
module.exports = InputViewDust;
// /common/core/ampersand-view-dust.js
/**
* Overrides base Ampersand View class to make it work with Dust templates
*/
/*global dust*/
var View = require('ampersand-view');
var ViewDust = View.extend({
render: function () {
var self = this;
//using toJSON() here because ampersand models don't seem to work directly (because of magic getters?)
var model = self.model ? self.model.toJSON() : {};
dust.render(self.template, model, function (err, out) {
self.template = out;
return View.prototype.render.call(self);
});
}
});
module.exports = ViewDust;
// base view for pages
// /client/js/pages/base.js
var ViewDust = require('../../../common/core/ampersand-view-dust');
module.exports = ViewDust.extend({
// register keyboard handlers
registerKeyboardShortcuts: function () {
},
unregisterKeyboardShortcuts: function () {
}
});
// app.js
// require the compiled template module, and register the templates with Dust
...
var dustTemplates = require('./allDustTemplates.js');
module.exports = {
// this is the the whole app initter
blastoff: function () {
var self = window.app = this;
...
//load all the dust templates
dustTemplates.registerAll();
// client/pages/info.js
// once you have the base stuff setup, the actual views are trivial
var PageView = require('./base');
module.exports = PageView.extend({
pageTitle: 'more info',
template: 'pages.info'
});
// Gruntfile.js
var path = require("path");
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-debug-task');
grunt.loadNpmTasks("grunt-dustjs-linkedin");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-localizr');
var templateCwd = 'client/templates/';
var templateFiles = '**/*.dust';
var templateDestDir = 'tmp/templates-js/';
// Project configuration.
grunt.initConfig({
copy: {
dust_core: {
src: 'node_modules/dustjs-linkedin/dist/dust-core.js',
dest: 'common/vendor/'
}
},
dust: {
compile: {
files: [
{
cwd: templateCwd,
expand: true,
src: templateFiles,
dest: templateDestDir,
ext: ".js"
}
],
options: {
name: function (data) {
//prune off the cwd path, and then convert remaining path separators to dots
var filePath = data.file.src[0];
var basePath = '';
if (filePath.indexOf(templateCwd) === 0) {
basePath = templateCwd;
}
if (filePath.indexOf(applyTemplateCwd) === 0) {
basePath = applyTemplateCwd;
}
var key = path.relative(basePath, path.dirname(filePath)).split(path.sep) // folder names
.concat([path.basename(filePath, path.extname(filePath))]) // template name
.join(".");
if (key.charAt(0) == ".")
return key.substr(1, key.length - 1);
return key;
}
}
}
},
delta: {
templates: {
cwd: templateCwd,
files: [templateFiles],
tasks: ['dust', 'concat']
},
scripts: {
files: ['client/js/**/*.js', 'common/**/*.js'],
tasks: ['browserify']
}
},
concat: {
dist: {
src: [templateDestDir + '/**/*.js'],
dest: 'client/js/allDustTemplates.js'
},
options: {
banner: "window.dust=require('../../common/vendor/dust-core');exports.registerAll = function() {",
footer: "};"
}
},
browserify: {
js: {
src: 'client/js/**/*.js',
dest: 'public/js/allJs.js',
options: {
browserifyOptions: {
debug: true
}
}
}
},
clean: {
'tmp': 'tmp'
},
localizr: {
files: templateCwd + templateFiles,
options: {
contentPath: ['locales/**/*.properties']
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
"asi": false,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": false,
"eqeqeq": true,
"eqnull": true,
"expr": true,
"immed": true,
"indent": 2,
"latedef": "nofunc",
"loopfunc": true,
"newcap": true,
"node": true,
"nonew": true,
"noarg": true,
"quotmark": "single",
"regexp": true,
"sub": true,
"trailing": true,
"undef": true,
"unused": true,
"white": true
},
client: {
files: {
src: [
'client/js/**/*.js',
'!client/js/allDustTemplates.js',
'!client/js/vendor/*'
]
},
options: {
browser: true
}
},
server: {
files: {
src: [
'server/**/*.js'
]
},
options: {
browser: false
}
}
}
});
/**
* In order to make it safe to just compile or copy *only* what was changed,
* we need to ensure we are starting from a clean, fresh build. So we rename
* the `watch` task to `delta` (that's why the configuration var above is
* `delta`) and then add a new task called `watch` that does a clean build
* before watching for changes.
*/
grunt.renameTask( 'watch', 'delta' );
grunt.registerTask( 'watch', ['default', 'delta', 'clean:tmp'] );
grunt.registerTask('default', ['clean', 'copy', 'dust', 'concat', 'browserify', 'clean:tmp']);
};
A last note, my app has a hard copy of the dust-core library at:
/common/vendor/dust-core.js
(Dust - Asynchronous Templating - v2.5.1 http://linkedin.github.io/dustjs/ )
And in my package.json:
dependencies:
"dustjs-linkedin": "^2.5.0",
dev-dependencies:
"grunt-dustjs-linkedin": "^0.5.1",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment