Quick Start

Now let's start with a todolist. What is a todolist?

Firstly, we need to add some support libs with script tags. you can find them in /libs sub directory of tinyts or their offical website, which is mentioned in tinyts readme.

<!-- linq js support -->
<script src="/js/multiplex.min.js"></script>
<!-- mustache support -->
<script src="/js/mustache.min.js"></script>
<script src="/js/jquery-1.12.3.min.js"></script>
<!-- using systemjs -->
<script src="/js/system.js"></script>
<!-- add es6 polyfill if ie -->
<script id="mIEPolyFill">
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
    $("#mIEPolyFill").replaceWith('<script src="/js/promise.min.js"><\/script>' +
                '<script src="/js/es6-shim.min.js"><\/script>' +
                '<script src="/js/es6-sham.min.js"><\/script>');
    }
</script>
<!-- tinyts framework -->
<script src="/js/tinyts.js"></script>
<!-- config class validator -->
<script>
System.config({
    map: {
        'class-validator': '/node_modules/class-validator',
        'validator': '/node_modules/validator'
    },
    packages: {
        'class-validator': { 'defaultExtension': 'js', 'main': 'index.js' },
        'validator': { 'defaultExtension': 'js', 'main': 'validator.js' },
    }
});
</script>

We create a ul element with mustache template to display the to do list, and an input element to add item.

<input type="text" id="newItem">
<ul id="list" data-bind="data">
    <li>{{Name}}</li>
</ul>

Turn to ts code:

import { AncView, v } from 'tinyts/core/tinyts';
import { ListView } from 'tinyts/control/list';
import { InputView } from "tinyts/control/input";

enum KeyCode {
    ENTER = 13
}

class TodoData {
    constructor(public Name: string) { }
}

class TodoDemo extends AncView {

    data: TodoData[];

    @v(ListView)
    list: ListView<TodoData>;

    @v(InputView)
    newItem: InputView;

    AfterInject() {
        this.newItem.On("keydown", (ev: JQueryKeyEventObject) => {
            if (ev.keyCode == KeyCode.ENTER) {
                this.data.push(new TodoData(this.newItem.Value()));
                this.newItem.SetValue("");
            }
        });


        this.list.SetEventHandler("li", (obj) => {
            var text = $(obj.target).text();
            for (var i = 0; i < this.data.length; i++) {
                if (this.data[i].Name == text) {
                    this.data.splice(i, 1);
                }
            }
        });

        this.data = [new TodoData("First"), new TodoData("Second")];

    }

}
// create a TodoDemo instance.
var aa = new TodoDemo();

TodoDemo is the context in this example. some of its properties are bound with DOM element. That means what we do to TodoDemo's listwill effect to ul#list element.

Notice the @v decorator upon the list property, it'll establish the connection to the html element via id attribute, here the dependency injection feature works.

The data-bind attribute tells tinyts that the DOM ul element is bound with data property in class TodoDemo.

And the AfterInject method will be triggered after all injection finish(it a hook feature).

Add a tsconfig.json file to tell the ts compiler what js we want. how to compile ts code?

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "moduleResolution": "classic",
        "target": "es5",
        "module": "system",
        "outFile": "todo.js"
    }
}

Finally, add the compiled js file to html, and use System.import to import the todo module.

<script src="js/todo.js"></script>
<script>
    System.import("todo");
</script>

You can find the quickstart code here.