Basic build process and transforming json into html

src/scripts/lib/item-types.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var manipulators = require('./manipulators');
+
+module.exports = {
+  heading: {
+    template: require('../../templates/components/heading.mustache'),
+    manipulator: manipulators.html
+  },
+  subheading: {
+    template: require('../../templates/components/subheading.mustache'),
+    manipulator: manipulators.html
+  },
+  footer: {
+    template: require('../../templates/components/footer.mustache'),
+    manipulator: manipulators.html
+  },
+  input: {
+    template: require('../../templates/components/input.mustache'),
+    manipulator: manipulators.val
+  },
+  color: {
+    template: require('../../templates/components/color.mustache'),
+    manipulator: manipulators.val
+  },
+  select: {
+    template: require('../../templates/components/select.mustache'),
+    manipulator: manipulators.val,
+    valueTransformer: function(rawValue, item) {
+      item.options.forEach(function(option, index) {
+        if (option.value === rawValue) {
+          item.options[index].selected = 'selected';
+        }
+      });
+      return rawValue;
+    }
+  },
+  toggle: {
+    template: require('../../templates/components/toggle.mustache'),
+    manipulator: manipulators.checked,
+    valueTransformer: function(rawValue) {
+      return rawValue ? 'checked' : '';
+    }
+  },
+  submit: {
+    template: require('../../templates/components/submit.mustache'),
+    manipulator: manipulators.val
+  }
+};

src/scripts/lib/manipulators.js

@@ -0,0 +1,47 @@
+'use strict';
+
+module.exports = {
+  html: {
+    get: function() {
+      return this.$manipulatorTarget.html();
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.html(value)
+        .triggerHandler('change');
+    }
+  },
+  val: {
+    get: function() {
+      return this.$manipulatorTarget.val();
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.val(value)
+        .triggerHandler('change');
+    },
+    disable: function() {
+      return this.$manipulatorTarget.prop('disabled', true)
+        .triggerHandler('change');
+    },
+    enable: function() {
+      return this.$manipulatorTarget.prop('disabled', false)
+        .triggerHandler('change');
+    }
+  },
+  checked: {
+    get: function() {
+      return this.$manipulatorTarget.prop('checked');
+    },
+    set: function(value) {
+      return this.$manipulatorTarget.prop('checked', value)
+        .triggerHandler('change');
+    },
+    disable: function() {
+      return this.$manipulatorTarget.prop('disabled', true)
+        .triggerHandler('change');
+    },
+    enable: function() {
+      return this.$manipulatorTarget.prop('disabled', false)
+        .triggerHandler('change');
+    }
+  }
+};