Attribute Manager

Flow.js provides a set of custom DOM attributes that serve as a data binding between variables and operations in your project's model and HTML elements in your project's user interface. Under the hood, Flow.js is doing automatic conversion of these custom attributes, like data-f-bind, into HTML specific to the attribute's assigned value, like the current value of myModelVar.

If you are looking for examples of using particular attributes, see the specific attributes subpages.

If you would like to extend Flow.js with your own custom attributes, you can add them to Flow.js using the Attribute Manager.

The Attribute Manager is specific to adding custom attributes and describing their implementation (handlers). (The Dom Manager contains the general implementation.)

Examples

Built-in attribute handlers like data-f-value and data-f-foreach automatically bind variables in your project's model to particular HTML elements. However, your UI may sometimes require displaying only part of the variable (e.g. if it's an object), or "doing something" with the value of the variable, rather than simply displaying it.

One example of when custom attribute handlers are useful is when your model variable is a complex object and you want to display the fields in a particular way, or you only want to display some of the fields. While the combination of the data-f-foreach attribute and templating can help with this, sometimes it's easier to write your own attribute handler. (This is especially true if you will be reusing the attribute handler -- you won't have to copy your templating code over and over.)

 Flow.dom.attributes.register('showSched', '*', function (sched) {
       // display all the schedule milestones
       // sched is an object, each element is an array
       // of ['Formal Milestone Name', milestoneMonth, completionPercentage]

       var schedStr = '<ul>';
       var sortedSched = _.sortBy(sched, function(el) { return el[1]; });

       for (var i = 0; i < sortedSched.length; i++) {
             schedStr += '<li><strong>' + sortedSched[i][0]
                   + '</strong> currently scheduled for <strong>Month '
                   + sortedSched[i][1] + '</strong></li>';
       }
       schedStr += '</ul>';

       this.html(schedStr);
 });

Then, you can use the attribute handler in your HTML just like other Flow.js attributes:

 <div data-f-showSched="schedule"></div>

Methods

register

Add a new attribute handler.

Parameters

• attributeMatcher: String|Function|Regex Description of which attributes to match.

• nodeMatcher: String Which nodes to add attributes to. Use jquery Selector syntax.

• handler: Function|Object If handler is a function, the function is called with $element as context, and attribute value + name. If handler is an object, it should include two functions, and have the form: { init: fn, handle: fn }. The init function is called when the page loads; use this to define event handlers. The handle function is called with $element as context, and attribute value + name.

filter

Find an attribute matcher matching some criteria.

Parameters

• attrFilter: String Attribute to match.

• nodeFilter: String|$el Node to match.

Return Value

• Array|Null: An array of matching attribute handlers, or null if no matches found.

replace

Replace an existing attribute handler.

Parameters

• attrFilter: String Attribute to match.

• nodeFilter: String|$el Node to match.

• handler: Function|Object The updated attribute handler. If handler is a function, the function is called with $element as context, and attribute value + name. If handler is an object, it should include two functions, and have the form: { init: fn, handle: fn }. The init function is called when the page loads; use this to define event handlers. The handle function is called with $element as context, and attribute value + name.

getHandler

Retrieve the appropriate handler for a particular attribute. There may be multiple matching handlers, but the first (most exact) match is always used.

Parameters

• property: String The attribute.

• $el: $el The DOM element.

Return Value

• Object: The attribute handler.