VNDB fork of mithril.js
72c039c4dc
Background: In ES6 we now have `Object.setPrototypeOf` which makes prototype delegation an alternative to *sugary*, fake class coding patterns. This can be accomplished in ES5, but ES6 is much more elegant. Here is a basic example. `new` is never used and `this` is very easy to follow. Working example with changes to mithril.js on lines 854, 858, 859 *only*. http://jsbin.com/nopugo/1/edit?js,console,output ```javascript 'use strict' const m = require('mithril') const DataModel = { data: [1,2,3], getData(){ console.log('getting data from server') return this.data }, postData(val){ console.log('sending data to server') this.data.push(val) } } const ViewModel = { filterEvenData: function() { return this.getData().filter((val) => (val % 2 === 0) && (+val !== 0)) }, addNewData: function(val){ console.log('adding new data', val) this.postData(val) } } var Model = Object.setPrototypeOf(ViewModel, DataModel) const App = { controller(){}, view(ctrl){ return m('div', [ m('pre', [ 'EVEN NUMBERS IN DATA\n', this.filterEvenData().map((key,i) =>`${i+1} = ${key}\n`) ]), m('div', 'Enter a number'), m('input[placeholder=number]', { // addNewData is called with **this** === undefined unless we pass `this` to Function.prototype.call in m.withAttr onchange: m.withAttr('value', App.addNewData, App), value: null } ) ]) } } Object.setPrototypeOf(App, Model) m.mount(document.body, App) ``` |
||
|---|---|---|
| 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);