JavaScript MVC 框架：Ity
jopen
9年前
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 });