Metadata
- Source
- FLUID-4928
- Type
- Improvement
- Priority
- Major
- Status
- Reopened
- Resolution
- N/A
- Assignee
- Antranig Basman
- Reporter
- Antranig Basman
- Created
2013-03-08T02:02:35.305-0500 - Updated
2021-06-21T11:30:00.299-0400 - Versions
-
- 1.4
- Fixed Versions
- N/A
- Component
-
- Data Binder
- IoC System
- Renderer
Description
A feature considered for some time has been the ability to declaratively associate various model state conditions directly with visible representations in the DOM. The most obvious use case for this is associating model state consisting of boolean flags with visibility/enabledness of linked DOM nodes using $.hide/show and $.prop("disabled"), etc.
The earliest discussion on this issue can be traced to IRC logs from January 2012:
http://wiki.fluidproject.org/display/fluid/fluid-work+IRC+Logs-2012-01-26
Some other linked discussion is on FLUID-4718 where a large comment speculates about the relation of such a feature to the "new renderer". An obvious incremental generalisation of this feature is to directly map changes in model state onto DOM UI rendered by the renderer into incremental DOM manipulations without a wholesale invocation of the whole renderer. Through further increments in sophistication, this implementation would shade into invocations of the renderer itself, e.g. for entire table rows etc.
There is a "proto-framework" implementation of this feature available in the VideoPlayer under the name "fluid.videoPlayer.showHide":
https://github.com/fluid-project/videoPlayer/blob/master/js/VideoPlayer_showHide.js
This designates a portion of the model as particularly relating to DOM visibility having the format:
model: {
isShown: {
// A list of flags (true or false) to define the showing/hiding of any selectors
// in a component. Example:
// "scrubber.handle": false
// "scrubber" is the identifier defined in the option "showHidePath", normally the
// unique component name. "handle" is the selector defined in the "scrubber" component.
}
Some "prior art" for this framework feature is the binding system of "knockout.js", for example, the "visible" binding described here:
http://knockoutjs.com/documentation/visible-binding.html
This feature is the natural inverse of the Fluid renderer's "autoBind" feature, and various artefacts in the renderer's implementation such as the mysterious thoroughness of dumping bindings for component fragments as in the following for UISelect:
dumpBoundFields(uiselect.selection);
dumpBoundFields(uiselect.optionlist);
dumpBoundFields(uiselect.optionnames);
suggest that this feature was always envisaged.