# new RezView()
The main view controller that manages rendering and DOM transformations.
RezView is responsible for:
- Managing the layout hierarchy and content blocks
- Rendering HTML into the container element
- Applying transformers to set up event handlers and bindings
- Tracking two-way data bindings between form elements and game state
The view uses a layout stack to support nested layouts during complex rendering scenarios. Bindings are cleared and re-established on each render cycle.
Example
// Create a view with a stack layout
const layout = new RezStackLayout("scene", sceneElement);
const view = new RezView("game-container", eventReceiver, layout);
// Add content and render
view.addLayoutContent(new RezBlock("card", cardElement));
view.update();Members
Methods
# addLayoutContent(content)
Adds content to the current layout.
Parameters:
| Name | Type | Description |
|---|---|---|
content |
RezBlock
|
The content block to add |
# clearBindings()
Clears all registered bindings.
Called at the start of each render cycle since bindings are re-established by transformers.
# copy() → {RezView}
Creates a copy of this view with copied layouts.
Bindings are not copied as they are cleared on each render.
A new view with copied state
# defaultTransformers() → {Array.<RezTransformer>}
Creates the default set of transformers.
Default transformers handle:
- Click events (
[data-event]) - Card block references
- Form submissions
- Data bindings (
rez-bind) - Live inputs (
rez-live) - Enter key handling
Array of default transformers
Array.<RezTransformer>
# hasBinding(binding_id, binding_attr) → {boolean}
Checks if a binding is registered for a given element and attribute.
Parameters:
| Name | Type | Description |
|---|---|---|
binding_id |
string
|
The element ID |
binding_attr |
string
|
The attribute name |
True if binding exists
boolean
# popLayout()
Pops the current layout and restores the previous one.
# pushLayout(layout)
Pushes a new layout onto the stack, making it the current layout.
Use this when entering a nested layout context. Pop when exiting.
Parameters:
| Name | Type | Description |
|---|---|---|
layout |
RezLayout
|
The layout to push |
# registerBinding(binding_id, binding_attr, callback)
Registers a callback for updating a bound control when data changes.
Parameters:
| Name | Type | Description |
|---|---|---|
binding_id |
string
|
The element ID |
binding_attr |
string
|
The attribute name |
callback |
function
|
Function called with new value when data changes |
# render()
Renders the layout HTML into the container.
Note: Event listeners added by transformers are automatically cleaned up when innerHTML is replaced - no explicit cleanup needed. The DOM elements holding the listeners are destroyed, allowing garbage collection.
# update()
Performs a complete view update: clear bindings, render, and transform.
This is the main method to call when the view needs to refresh.
# updateBoundControls(binding_id, binding_attr, value)
Updates bound form controls when the underlying data changes.
Called by game elements when their attributes change to keep the UI in sync.
Parameters:
| Name | Type | Description |
|---|---|---|
binding_id |
string
|
The element ID |
binding_attr |
string
|
The attribute name |
value |
*
|
The new value |
# static constructor(container_id, receiver, layout, transformersopt)
Creates a new RezView.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
container_id |
string
|
ID of the DOM container element |
|
receiver |
Object
|
Event receiver for handling user interactions |
|
layout |
RezLayout
|
The root layout for the view |
|
transformers |
Array.<RezTransformer>
|
<optional> |
Custom transformers (uses defaults if not provided) |
If container element not found
Error