VNDB fork of mithril.js
7ce8429bf4
@ArthurClemens pointed out in this gitter comment: https://gitter.im/lhorie/mithril.js?at=55664ba1d21e5ed02ff06e54 that the Classic MVC example is broken: https://lhorie.github.io/mithril/components.html#classic-mvc I wanted to show a working jsfiddle with these changes applied, but I couldn't figure out how to get a POST request working. I do, however, have a jsbin that is working, although there are significant changes in the code to allow for GET and POST. http://jsbin.com/cokesu/2/edit?js,output A redraw is called for every character entered in the jsbin but AFAICT, not in this PR. I don't know why. It's as though `oninput` is really `onchange`. It's possible to limit the redraw to once when the "save" button is clicked, but this requires a change in logic: var ContactForm = { controller: function(args) { this.contact = m.prop(new Contact()) this.save = function(contact) { Observable.trigger("saveContact", {contact: contact}) } }, view: function(ctrl, args) { var contact = ctrl.contact() return m("form", [ m("label", "Name"), m("input[name=name]"), m("label", "Email"), m("input[name=email]"), m("button[type=button]", {onclick: function(){ contact = { name: m.prop(this.parentNode.elements.name.value), email: m.prop(this.parentNode.elements.email.value) } ctrl.save(contact) }}, "Save") ]) } } |
||
|---|---|---|
| deploy | ||
| docs | ||
| tests | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .npmignore | ||
| .travis.yml | ||
| dragdrop.html | ||
| Gruntfile.js | ||
| guide.html | ||
| LICENSE | ||
| mithril.closure-compiler-externs.js | ||
| mithril.d.ts | ||
| mithril.js | ||
| mithril.min.js | ||
| mithril.min.js.map | ||
| modulator-test.html | ||
| mvc.html | ||
| onerror.html | ||
| package.json | ||
| README.md | ||
Mithril
A Javascript Framework for Building Brilliant Applications
See the website for documentation
There's also a blog and a mailing list
What is Mithril?
Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.
Light-weight
- Only 5kb gzipped, no dependencies
- Small API, small learning curve
Robust
- Safe-by-default templates
- Hierarchical MVC via components
Fast
- Virtual DOM diffing and compilable templates
- Intelligent auto-redrawing system
Sample code
//namespace
var app = {};
//model
app.PageList = function() {
return m.request({method: "GET", url: "pages.json"});
};
//controller
app.controller = function() {
var pages = app.PageList();
return {
pages: pages,
rotate: function() {
pages().push(pages().shift());
}
}
};
//view
app.view = function(ctrl) {
return [
ctrl.pages().map(function(page) {
return m("a", {href: page.url}, page.title);
}),
m("button", {onclick: ctrl.rotate}, "Rotate links")
];
};
//initialize
m.module(document.getElementById("example"), app);