mvc-tsx

MVC-TSX (alpha version)

With MVC-TSX you can write imperative code for creating reactive applications.

import React from "react";
import * as ReactDOM from "react-dom";
import {Model, View, Controller, on, arg} from "mvc-tsx";

// define Model
class LoginModel extends Model {
    login: string = "";
    password: string = "";
}

// define Controller
class LoginController extends Controller<LoginModel> {

    @on("change", ".Login--loginInput")
    onChangeLogin( @arg("target", "value") inputValue ) {
        this.model.set({
            login: inputValue
        });
    }

    @on("change", ".Login--passInput")
    onChangePassword( @arg("target", "value") inputValue ) {
        this.model.set({
            password: inputValue
        });
    }

    @on("click", ".User--loginBtn")
    onClickLogin() {
        const {login, password} = this.model;
        // do login ...
    }
}

// define View
class LoginView extends View<LoginModel> {
    
    // list of Controllers
    controllers() {
        return [
            LoginController
        ];
    }

    template(loginModel: LoginModel>) {
        return (<div className="Login">
            <input className="Login--loginInput"/>
            <input className="Login--passInput"/>
        </div>);
    }

}

// and render
const loginModel = new LoginModel();

ReactDOM.render(
    <LoginView model={loginModel}/>,
    document.getElementById("root")
);

Downloads

minify + React + EventEmitter + MVC

React + EventEmitter + MVC

minify + MVC

MVC

Examples

clock
counter
cart
TodoMVC