Component Source Types

Different types of view model properties can be used as a source for data to be used in a bound component (e.g. text replacement, class name, loop iterable). Depending on what you pass, it could be a property of the view model, a property of the view (the component), an observable, or the view model itself.

prop1
prop2
prop3
prop4
.
.
.
this.prop8
this.prop9
this.prop10
. ^description

API

Link to the demo script
Scenario Example Detail
The view model is a simple object with simple field values (not observables). const viewModel = { fn: 'John', ln: 'Doe' }

The component looks up a value in the view model ( this.viewModel["someName"]).

The view model is an object with ObservableProperty class fields. const viewModel = { fn: new ObservableProperty('John'), ln: 'Doe' }

The component looks up a value in the view model and returns its current value ( this.viewModel["someName"].value).

The view model field being requested is a method/function. const viewModel = new ObservableProperty({ fn(): function() { return 'John' }, ln: 'Doe' })

The component looks up a value in the view model, executes the method, and returns the result value ( this.viewModel["someName"]()). The method is always executed with no parameters (I'm considering adding parameters in the future, but I'm not sure it's actually that useful).

The view model is a ObservableState class. const viewModel = new ObservableState<MyClass>({ fn: 'John', ln: 'Doe' })

The component applies lookup to the current internal state of the view model ( this.viewModel.value["someName"]). <i-v>fn</i-v> would return 'John' in this example.

The property requested begins with "^" (a caret). The parents of <i-v>name</i-v> are <i-v>^mother</i-v> and <i-v>^father</i-v>.

The property to be fetched is a property of this.loopParent.viewModel. This is used only when a loop (i5_loop) is being used and the default loopPostProcess() method is called after looping. In this, the default scenario, the viewModel of the calling component is stored in loopParent.viewModel. By beginning the source with ^, the property fetched belongs to this one-level-up viewModel without forcing you to build a custom loop component (and accessing by "this.getSomeRandomPropertyFromParent").

The property requested is "." (a period by itself). My name is <i-v>.</i-v>>

The view model itself is the property to be fetched. It can be a simple value, and observable property, observable state, or method. The previously described rules applying to properties of the view model are applied to the view model itself.

The property requested begins with the string "this." (case matters). My name is <i-v>this.getMyName</i-v>

The component searches the component itself for the property to look up ( this["someName"] instead of this.viewModel["someName"]). The value can be a simple value, and observable property, or method (note that observable state is not included, because obviously the component is a BoundComponent class, not ObservableState). The previously described rules applying to properties of the view model are applied to the component property.

Warning: By default, initial render() is called in the constructor of BoundComponent, which in this scenario is going to be the base class. If "this." is referenced, to avoid seeing issues because the object hasn't been set up completely (this will happen in the constructor of the descendant class), render() is deferred until initialization is complete. You will need to either set async: true or call render() yourself after the properties are set.

To understand why, consider the following class ... which of the two properties exists before super() is called and which does not? Contrast with the object model in C#. class MyClass { a: string = "A"; b(): string { return "B"; } }
The :source (or i5_source or data-i5_source) property is set. <component :source="otherComponent" :class="someField"></component>

Before looking for the data source, Ichigo looks for the component with id matching the source. It then uses the view model of that component to resolve the data.