Here's the requisite hello world demo. This demo is made up of two parts, one line of HTML and one line of JS. First, the HTML line:
<div id="hello">Hello <i-v>name</i-v></div>
This creates a div whose content is "Hello" followed by a replacement value, indicated by
i-v tags containing a property name from the view model bound to the component. The view
model in this case is an object containing a property named
name.
The basic pattern for
i-v tags is
<i-v>SOME-PROPERTY-NAME</i-v>. This is the same as some languages' { SOME-PROPERTY-NAME }, {{ SOME-PROPERTY-NAME }},
or @Model.SomePropertyName replacements.
By default, the replaced value is HTML-escaped; to render an unescaped value, use
<i-v noescape>SOME-PROPERTY-NAME</i-v>.
Now let's look at the line of script:
new mi5.component.BoundComponent({ name: 'World' }, { element: document.getElementById('hello') });
This script creates a new BoundComponent and binds the data to the view model
{ name: 'World' } and binds the rendered output to the element whose id is "hello." By default, once this
has been bound, the component is then rendered, replacing the
i-v replacement tag with the requested value of "name," which is "World."
You might notice a brief flash of the word "name" before the script has run. This is visible because the text is on the actual
HTML page without any scripts. The simplest way to avoid this is to pass the HTML into
the component, so it is rendered before being written. Another solution would be to include
the following in the div HTML:
style="display: none;" :if="name", which starts being hidden and then is made visible if the name is populated.
And so there we have it, a demo where the description of the code is WAYYYY longer than the code.
Bound Component definition