To achieve this separation of concerns, the Presenter library implements the Presentation Model pattern [Martin Fowler 2007] — sometimes also known as MVVM (Model View View Model).
2. The View
Presenter embeds the Knockout library for HTML to JavaScript binding. A simple example of a binding is as follows:
<input type="text" name="firstName" data-bind="value:firstName"/>
This creates a two-way binding between the input element and a JavaScript property
(firstName) contained within the presentation model. All view bindings
are defined using similar data-bind attributes. The data-
prefix is defined in the HTML5 specification to indicate a custom attribute that is
valid HTML, but which is ignored by the browser.
Presenter enhances Knockout, allowing it to be embedded within Caplin web
applications. It makes it easy to create standard Caplin components built using
a presentation model and an HTML view (via
caplin.presenter.component.PresenterComponent), and it makes it easy for
these components to further embed any other Caplin components within themselves,
or to make use of standard Caplin renderers for display purposes where
this is useful.
Presenter also supports nested HTML templates which allows parts of views to be reused (avoiding repetition) and enhancing modularity.
3. The Presentation Model
The presentation model is a logical representation of a component's view on screen
(the view). Everything on the screen is represented within the presentation model
using properties. The presenter library binds these properties
(instances of br.presenter.property.Property) to the view. Assuming
the binding is correct then the GUI is tested by unit testing the presentation
model.
This is extremely important since it allows fast, reliable unit testing, enabling TDD. The alternative is to test via the GUI (using a tool like Selenium) which is much slower and results in fragile tests.