Custom Tags

Related: Custom Attributes

To load another view, you can use the custom tags provided by the framework:

<vs-my-view package="myPackage" path="myPath" label="MyLabel" value="{myValue}" />

The tag name represents the name of the view, written using dashes instead of the camel case syntax. The framework translates this tag to the following code:

<div data-bind="{ name = 'myPackage:myPath/myView', label = 'MyLabel', value = myValue }" />

If no package attribute is defined, then the same package as the parent view is used. Attribute values are wrapped with ' so that they are treated as strings. If you want to define a binding, a computed value or any JavaScript expression, surround the expression with { and }. If the content is a "complex" expression, it is automatically wrapped with ko.computed(...) so that changes can be observed:

<vs-my-view label="{firstName() + ' ' lastName()}" />

Because the label attribute contains a computed value, its content is translated to a KnockoutJS computable:

<div data-bind="{ label = ko.computed(function () { return firstName() + ' ' lastName(); }), ... }" />

The children of custom tags are automatically converted to complex parameters. Have a look at the following tag:

<vs-tab-control package="common">
    <my-object x="Foo" y="Bar" />
    <my-collection>
        <my-item a="Foo" b="Foo" />
        <my-item a="Bar" b="Bar" />
    </my-collection>
</vs-tab-control>

Each direct child of a custom tag represents a parameter key. If the child has children then they get converted to an array of objects. The parameters can be accessed in the view or view model class:

var myObject = this.parameters.getObject<any>("myObject");
var myCollection = this.parameters.getObject<any>("myCollection");

The object in the myCollection variable now has the following structure:

[
    { a = "Foo", b = "Foo" },
    { a = "Bar", b = "Bar" },
]

When the parameters also support one-way or two-way bindings (e.g. when passed via observables), then they should be read this way:

var myObject = this.parameters.getObservableObject<any>("myObject");
var myCollection = this.parameters.getObservableArray<any>("myCollection");