Stephen,
OK, I see you missed the concept that data-dojo-attach-point is the hook back to your templated widgets html component. Also you need to immediately grasp the concept that your requires (i.e. 'jimu/BaseWidget' and it associated var BaseWidget) have to match in order of listing identically. Example: dojo/_base/declare > declare, dojo/_base/lang > lang, jimu/BaseWidget > BaseWidget, dojo/on > on, esri/toolbars/navigation > Navigation.
Widget.js:
define([
'dojo/_base/declare',
'dojo/_base/lang',
'jimu/BaseWidget',
'dojo/on',
'esri/toolbars/navigation'
],
function(declare, lang, BaseWidget, on, Navigation) {
var clazz = declare([BaseWidget], {
name: 'Navigation',
navToolbar: null,
startup: function() {
this.navToolbar = new Navigation(this.map);
this.own(on(this.zoomIn, 'click', lang.hitch(this, function() {
this.navToolbar.activate(Navigation.ZOOM_IN);
})));
}
});
return clazz;
});
Widget.html:
<div>
<label>${nls.selectNavigation}</label>
<div>
<input type="button" value="Zoom In" data-dojo-attach-point="zoomIn">
</div>
</div>
Attached is your widget based on the code you had so far corrected.