Tweet

tupai.js

tupai.js is a minimal and flexible JavaScript MVC framework.
providing a robust set of features for building single and multi-pages.

Download from Github

Package

  • Java like package-class system. Namespaces are needed because there can be many functions, variables for classes in one program and they can conflict with the existing names of variables, functions and classes.

Template engine

  • Roles of engineers and mark-up is clear.
  • Customizable template engine. (You can work with, such as mustache)

CLI

  • Automatic source code generation.
  • Start a test server.
  • Make files for release.
  • etc ...

Getting started

Install with npm. If you were not installed node, install node (Joyent, Inc,).

$ npm install tupaijs

Generate project Use tupaijs command.

$ tupaijs new helloworld

Start server.

$ cd helloworld; tupaijs server

Open in browser

$ http://localhost:9800

That's All♡

Creating master detail view

Generate controller.

$ tupaijs g controller sub

Edit templates/helloworld/Templates.html add an button to "div#helloworld.RootViewController.content".

$ <button data-ch-id="btnGotoSub">goto sub</button>

Edit templates/helloworld/Templates.html add an button to "div#helloworld.SubViewController.content".

$ <button data-ch-id="btnBack">back</button>

Edit RootViewController.js

First, in order to change the contents of the text that is displayed on the screen, viewInit function is modified as follows.

viewInit: function() {
    var view = new cp.View({
       template:cp.Templates.get('helloworld.RootViewController.content'),
        templateParameters: {
            lbl: 'RootViewController'
        }
    });
    this.setContentView(view);
},

ViewDidLoad function is as follows, adding the processing of a button.

viewDidLoad: function (view) {
    var This = this;
    view.findViewById('btnGotoSub').bind('click', function() {
        This._window.transitWithHistory('/sub');
    });
},

Edit SubViewController.js

First, in order to change the contents of the text that is displayed on the screen, viewInit function is modified as follows.

viewInit: function() {
    var view = new cp.View({
        template: cp.Templates.get('helloworld.SubViewController.content'),
        templateParameters: {
            lbl: 'SubViewController'
        }
    });
    this.setContentView(view);
},

ViewDidLoad function is as follows, adding the processing of the back button.

var This = this;
view.findViewById('btnBack').bind('click', function() {
    This._window.back();
});

view source