2 //==================================================================================================
4 //==================================================================================================
6 Form
.Field
= (function() {
8 var helpers
= Form
.helpers
,
9 templates
= Form
.templates
;
11 return Backbone
.View
.extend({
14 * @param {Object} Options
16 * key {String} : The model attribute key
18 * schema {Object} : Schema for the field
19 * value {Mixed} : Pass value when not using a model. Use getValue() to get out value
20 * model {Backbone.Model} : Use instead of value, and use commit().
21 * idPrefix {String} : Prefix to add to the editor DOM element's ID
26 * @param {Object} options
27 * @param {Object} [options.schema] Field schema. Defaults to { type: 'Text' }
28 * @param {Model} [options.model] Model the field relates to. Required if options.data is not set.
29 * @param {String} [options.key] Model key/attribute the field relates to.
30 * @param {Mixed} [options.value] Field value. Required if options.model is not set.
31 * @param {String} [options.idPrefix] Prefix for the editor ID. By default, the model's CID is used.
35 initialize: function(options
) {
36 options
= options
|| {};
38 this.form
= options
.form
;
39 this.key
= options
.key
;
40 this.value
= options
.value
;
41 this.model
= options
.model
;
43 //Turn schema shorthand notation (e.g. 'Text') into schema object
44 if (_
.isString(options
.schema
)) options
.schema
= { type
: options
.schema
};
47 this.schema
= _
.extend({
49 title
: helpers
.keyToTitle(this.key
),
56 * Provides the context for rendering the field
57 * Override this to extend the default context
59 * @param {Object} schema
60 * @param {View} editor
62 * @return {Object} Locals passed to the template
64 renderingContext: function(schema
, editor
) {
70 editor
: '<b class="bbf-tmp-editor"></b>',
71 help
: '<b class="bbf-tmp-help"></b>',
72 error
: '<b class="bbf-tmp-error"></b>'
81 var schema
= this.schema
,
82 templates
= Form
.templates
;
84 //Standard options that will go to all editors
89 idPrefix
: this.options
.idPrefix
,
93 //Decide on data delivery type to pass to editors
95 options
.model
= this.model
;
97 options
.value
= this.value
;
100 //Decide on the editor to use
101 var editor
= this.editor
= helpers
.createEditor(schema
.type
, options
);
104 var $field
= $(templates
[schema
.template
](this.renderingContext(schema
, editor
)));
106 //Remove <label> if it's not wanted
107 if (schema
.title
=== false) {
108 $field
.find('label[for="'+editor
.id
+'"]').first().remove();
112 $field
.find('.bbf-tmp-editor').replaceWith(editor
.render().el
);
115 this.$help
= $('.bbf-tmp-help', $field
).parent();
117 if (this.schema
.help
) this.$help
.html(this.schema
.help
);
119 //Create error container
120 this.$error
= $($('.bbf-tmp-error', $field
).parent()[0]);
121 if (this.$error
) this.$error
.empty();
123 //Add custom CSS class names
124 if (this.schema
.fieldClass
) $field
.addClass(this.schema
.fieldClass
);
126 //Add custom attributes
127 if (this.schema
.fieldAttrs
) $field
.attr(this.schema
.fieldAttrs
);
129 //Replace the generated wrapper tag
130 this.setElement($field
);
136 * Creates the ID that will be assigned to the editor
141 var prefix
= this.options
.idPrefix
,
144 //Replace periods with underscores (e.g. for when using paths)
145 id
= id
.replace(/\./g, '_');
147 //If a specific ID prefix is set, use it
148 if (_
.isString(prefix
) || _
.isNumber(prefix
)) return prefix
+ id
;
149 if (_
.isNull(prefix
)) return id
;
151 //Otherwise, if there is a model use it's CID to avoid conflicts when multiple forms are on the page
152 if (this.model
) return this.model
.cid
+ '_' + id
;
158 * Check the validity of the field
162 validate: function() {
163 var error
= this.editor
.validate();
166 this.setError(error
.message
);
175 * Set the field into an error state, adding the error class and setting the error message
177 * @param {String} msg Error message
179 setError: function(msg
) {
180 //Object and NestedModel types set their own errors internally
181 if (this.editor
.hasNestedForm
) return;
183 var errClass
= Form
.classNames
.error
;
185 this.$el
.addClass(errClass
);
188 this.$error
.html(msg
);
189 } else if (this.$help
) {
190 this.$help
.html(msg
);
195 * Clear the error state and reset the help message
197 clearError: function() {
198 var errClass
= Form
.classNames
.error
;
200 this.$el
.removeClass(errClass
);
202 // some fields (e.g., Hidden), may not have a help el
205 } else if (this.$help
) {
208 //Reset help text if available
209 var helpMsg
= this.schema
.help
;
210 if (helpMsg
) this.$help
.html(helpMsg
);
215 * Update the model with the new value from the editor
218 return this.editor
.commit();
222 * Get the value from the editor
226 getValue: function() {
227 return this.editor
.getValue();
231 * Set/change the value of the editor
233 * @param {Mixed} value
235 setValue: function(value
) {
236 this.editor
.setValue(value
);
248 * Remove the field and editor views
251 this.editor
.remove();
253 Backbone
.View
.prototype.remove
.call(this);