wearhere/HandlebarsHelpers.js

## gulpfile.js
const handlebars = require('rollup-plugin-handlebars-plus');

// Rollup plugins
let plugins = [
  handlebars({
    templateExtension: '.html',
    helpers: ['/utils/HandlebarsHelpers'],
    jquery: 'jquery'
  })
];

## HandlebarsHelpers.js
export default function(Handlebars) {
  Handlebars.registerHelper('titlecase', (string) => {
    if (!string) return string;

    return string[0].toUpperCase() + string.slice(1);
  });
}

## HelloWorld.html
<h1>Hello, {{titlecase name}}</h1>

## HelloWorldModel.js
const HelloWorldModel = Backbone.Model.extend({
  defaults: {
    name: null
  }
});

## HelloWorldView.js
import Template from './HelloWorld.html';

const HelloWorldView = Backbone.View.extend({
  initialize() {
    this.listenTo(this.model, 'change', this.render);
  },

  render() {
    this.$el.html(Template(this.model.attributes));
    return this;
  }
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="//cdn.jsdelivr.net/g/backbonejs@1.3.3,underscorejs@1.8.3,jquery@3.1.1,handlebarsjs@4.0.5(handlebars.runtime.min.js)"></script>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

## index.js
import HelloWorldModel from './HelloWorldModel.js';
import HelloWorldView from './HelloWorldView.js';

let model = new HelloWorldModel({ name: 'jeff' });

new HelloWorldView({
  el: $('#main'),
  model
}).render();

setTimeout(() => {
  model.set('name', 'brad');
}, 2000);
	const handlebars = require('rollup-plugin-handlebars-plus');

	// Rollup plugins
	let plugins = [
	handlebars({
	templateExtension: '.html',
	helpers: ['/utils/HandlebarsHelpers'],
	jquery: 'jquery'
	})
	];
	export default function(Handlebars) {
	Handlebars.registerHelper('titlecase', (string) => {
	if (!string) return string;

	return string[0].toUpperCase() + string.slice(1);
	});
	}
	const HelloWorldModel = Backbone.Model.extend({
	defaults: {
	name: null
	}
	});
	import Template from './HelloWorld.html';

	const HelloWorldView = Backbone.View.extend({
	initialize() {
	this.listenTo(this.model, 'change', this.render);
	},

	render() {
	this.$el.html(Template(this.model.attributes));
	return this;
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//cdn.jsdelivr.net/g/backbonejs@1.3.3,underscorejs@1.8.3,jquery@3.1.1,handlebarsjs@4.0.5(handlebars.runtime.min.js)"></script>
	</head>
	<body>
	<div id="main"></div>
	</body>
	</html>
	import HelloWorldModel from './HelloWorldModel.js';
	import HelloWorldView from './HelloWorldView.js';

	let model = new HelloWorldModel({ name: 'jeff' });

	new HelloWorldView({
	el: $('#main'),
	model
	}).render();

	setTimeout(() => {
	model.set('name', 'brad');
	}, 2000);