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")
);