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>