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, event} from "mvc-tsx";

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

// define View
class LoginView extends View<LoginModel> {
    
    // declare interactive elements
    static ui = {
        loginInput: ".Login--loginInput",
        passInput: ".Login--passInput",
        // ctrl + click on key "loginButton"
        // can jump to method onClickLogin
        loginButton: ".Login--loginBtn"
    };

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

}

// define Controller
@forView(LoginView)
class LoginController extends Controller<LoginModel> {

    @on("change", LoginView.ui.loginInput)
    onChangeLogin( @event("target", "value") inputValue: string ) {
        this.model.set({
            login: inputValue
        });
    }

    @on("change", LoginView.ui.passInput)
    onChangePassword( @event("target", "value") inputValue: string ) {
        this.model.set({
            password: inputValue
        });
    }

    @on("click", LoginView.ui.loginButton)
    onClickLogin() {
        const {login, password} = this.model;
        // do login ...
    }
}

// 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
drag and drop