Form Support - tsgrp/HPI GitHub Wiki

Here's a handy template for injecting a Form Support view and abstracting away all of the knockout.

JS:

	MyAction.View.Properties = Backbone.Layout.extend({
		template: "actions/action/template",
		initialize: function() {
			// we'll default to having no starting properties to populate and to enable validation (which will be disabled if we're
			// on the bulk properties page)
			var defaults = {
				properties: {},
				enableValidation: true
			};

			var opts = this.options = _.extend(defaults, this.options);

			// this properties view model is what form support uses to put its controls on and other functions
			var propertiesViewModel = this.options.propertiesViewModel = {};

			// init form support - we only want atCreation attributes to show up since we're uploading stuff
			Formsupport.tsgFormSupport(propertiesViewModel,
                {
                    'isCreate': true,
                    'enableValidation': opts.enableValidation,
                    'enableReadonly': opts.enableReadonly,
                    'formName': opts.formName
                }
            );

			// set the form control properties once the controls have finished building
			propertiesViewModel.controls.subscribe(function() {
				// set our initial values once the controls have built
				propertiesViewModel.setValues(opts.properties);
			});

			// emit an event whenever the form's validity changes
			propertiesViewModel.isValid.subscribe(function(isValid) {
				AdvancedCombineToPDF.Events.trigger('change:properties', isValid);
			});

			// set the object type which will trigger the controls to be generated
			propertiesViewModel.objectType(opts.objectType);
		},
		afterRender: function() {
			// form support uses knockout so let's apply those bindings
			kb.applyBindings(this.options.propertiesViewModel, this.$el[0]);
		},
		getValues: function() {
			return this.options.propertiesViewModel.getValues();
		},
		isValid: function() {
			return this.options.propertiesViewModel.isValid();
		},
		serialize: function() {
			return {
				objectType: this.options.objectType,
				// only used if we're not in bulk properties page - to display the original document name of the document
				// currently being edited
				title: this.options.title
			};
		}
	});

and here's the markup:

<form class="form-horizontal col-md-12">
	<div >
		<div data-bind="template: {name: templateChooser, foreach: controls, afterRender: afterRender }"></div>
	</div>
</form>
⚠️ **GitHub.com Fallback** ⚠️