JavaScript MVC 框架：Ity

Ity 是一個小型的無依賴的 JavaScript MVC 框架。

App

• App.getView(id) - returns Ity.View instance by id
• App.addView(view) - add Ity.View instance to internal views array
• App.removeView(id) - remove Ity.View instance from internal views array by id
• App.trigger(evtName, data) -- trigger event by name on Application level. Optionally pass data

Model

• Model.initialize(options) - called on instatiation of Model instances, optional options hash can be passed
• Model.get("someDataPoint") - get value from internal data object hash by key
• Model.set("someDataPoint", ) - set value of internal data object by key
• Model.unSet("someDataPoint") - clear out valye of interanl data objecy by key
• Model.clear() - clear entire internal data objecy
• Model.on("eventName", ) - listen to Model instance events and call callback function
• Model.sync(options) - sync data in internal data object. Optionally pass options hash for url, type, success, error
• Model.trigger("eventName", ) - trigger event by name on Model instance and optionally pass data

View

• View.initialize(options) - called on instatiation of View instances, optional options hash can be passed
• View.getName() - return name attribute of view.
• View.get() - return attribute of view by key String
• View.set(, ) - set attribute of view to passed value
• View.on("eventName", ) - listen to View instance events and call callback function
• View.remove() - Remove internal el element and remove view from app
• View.trigger("eventName", ) - trigger event by name on View instance and optionally pass data
• View.select() - select DOM elements within set el object.

示例代碼：

var myApp = new Ity.Application();
var myModel = new Ity.Model();
var myView = new Ity.View({
    el: '.someElement',
    app: myApp,
    model: myModel,
    events: {
        ".btn" : {
            "click": "onBtnClick",
            "hover": "onBtnHover"
        },
        ".fancyBtn" : {
            "click": "onFancyBtnClick",
            "focus": "onFancyBtnFocus"
        }
    },

    initialize: function(options) {
        this.model.on("change", this.render, this);
    },

    render: function() {
        this.select(".myContainer").html(this.model.get("someData"));
    },

    onBtnClick: function(evt) {
        var output = this.select("#difWithId").find(".output");

        output.html("<div><p>Click!</p></div>")
    }

    //... more click, hover, focus events from events hash 
});

項目主頁：http://www.baiduhome.net/lib/view/home/1432257274536