Hello world example

yama.register({ name : 'myComponent1', draw : function(){ /*! root div text:title !*/ }, title : "Hello, world !" }); var myComponent = new yama.components.myComponent1(document.body); Results shown in this page are styled with border and padding for the purpose of clarity. Yama actually builds a plain dom tree without style.

To create a UI, Yama encourages you to write it as a reusable component.

First, you have to name your component with name property. Here we named it myComponent1 .

Second, you have to describe the way your component should be drawn. The UI is declared as a comment in draw function. In this example, we tell yama to create a div in the component's root dom and to bind it's text to the component's title property.

And that's it. In this example, we also add a custom property to our component : title . In draw function we told yama to bind the div's inner text to the value of title property with the directive text:title .

Now your component is ready to use. In plain javascript, you can call the constructor new yama.components.myComponent1(); If you want your component to be drawn into a specific dom element : var myComponent = new yama.components.myComponent1(document.getElementById("example1"));

The UI described as a comment may sound weird. The comment is serialized by yama, analysed by a simple parser, and rendered. Binding attributes are bound to observables. The use of comment as a multi-line string is actually a hack to provide a simple way to build UI with a non-verbose templating language.