-
Notifications
You must be signed in to change notification settings - Fork 9
Declarative rendering
pablocar80 edited this page Feb 15, 2021
·
3 revisions
Lara supports declaratively rendering data using a simple syntax:
using Integrative.Lara;
internal class SimpleComponent : WebComponent
{
private string _message;
private string Message { get => _message; set => SetProperty(ref _message, value); }
public SimpleComponent()
{
Message = "My Lara app";
ShadowRoot.Children = new Node[]
{
new HtmlDivElement
{
Children = new Node[]
{
new HtmlSpanElement()
.Bind(this, x => x.InnerText = Message)
}
}
};
}
}
Notice in the example above:
- The inherited method
SetProperty
modifies the value of the variable_message
and triggers a PropertyChanged event when the value changes. - The object's constructor builds the component's structure and elements.
- The
ShadowRoot
element in a component represents the object's empty canvas. We add elements inside it by assigning it'sChildren
collection. - The
Bind
method assigns theMessage
property to the span's inner text. This value gets reassigned every time our component triggers the PropertyChanged event.