Merge branch 'next' into es6-promise
This commit is contained in:
commit
2537bded27
6 changed files with 22 additions and 49 deletions
|
|
@ -16,7 +16,7 @@ Mithril is a client-side MVC framework - a tool to organize code in a way that i
|
|||
|
||||
### Light-weight
|
||||
|
||||
- Only 4kb gzipped, no dependencies
|
||||
- Only 5kb gzipped, no dependencies
|
||||
- Small API, small learning curve
|
||||
|
||||
### Robust
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
### Bug Fixes:
|
||||
|
||||
- gracefully degrade on IE exceptions when setting invalid values
|
||||
- fixes for Typescript definition file
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -70,13 +70,13 @@ The example below shows a component module called `user` being included in a par
|
|||
var dashboard = {
|
||||
controller: function() {
|
||||
this.greeting = "Hello";
|
||||
|
||||
|
||||
this.user = new user.controller();
|
||||
},
|
||||
view: function(controller) {
|
||||
return [
|
||||
m("h1", controller.greeting),
|
||||
|
||||
|
||||
user.view(controller.user)
|
||||
];
|
||||
}
|
||||
|
|
@ -155,7 +155,7 @@ module1.controller = function() {
|
|||
[How to read signatures](how-to-read-signatures.md)
|
||||
|
||||
```clike
|
||||
void module(DOMElement rootElement, Module module)
|
||||
Object module(DOMElement rootElement, Module module)
|
||||
|
||||
where:
|
||||
Module :: Object { Controller, void view(Object controllerInstance) }
|
||||
|
|
@ -166,19 +166,19 @@ where:
|
|||
- **DOMElement rootElement**
|
||||
|
||||
A DOM element which will contain the view's template.
|
||||
|
||||
|
||||
- **Module module**
|
||||
|
||||
A module is supposed to be an Object with two keys: `controller` and `view`. Each of those should point to a Javascript class constructor function
|
||||
|
||||
The controller class is instantiated immediately upon calling `m.module`.
|
||||
|
||||
|
||||
The controller class is instantiated immediately and a reference is returned upon calling `m.module`.
|
||||
|
||||
Once the controller code finishes executing (and this may include waiting for AJAX requests to complete), the view class is instantiated, and the instance of the controller is passed as an argument to the view's constructor.
|
||||
|
||||
|
||||
Note that controllers can manually instantiate child controllers (since they are simply Javascript constructors), and likewise, views can instantiate child views and manually pass the child controller instances down the the child view constructors.
|
||||
|
||||
|
||||
This "[turtles all the way down](https://en.wikipedia.org/wiki/Turtles_all_the_way_down)" approach is the heart of Mithril's component system.
|
||||
|
||||
|
||||
Components are nothing more than decoupled classes that can be dynamically brought together as required. This permits the swapping of implementations at a routing level (for example, if implementing widgetized versions of existing components), and class dependency hierarchies can be structurally organized to provide uniform interfaces (for unit tests, for example).
|
||||
|
||||
|
||||
|
|
|
|||
8
mithril.d.ts
vendored
8
mithril.d.ts
vendored
|
|
@ -5,7 +5,7 @@ interface MithrilStatic {
|
|||
(selector: string, children?: any): MithrilVirtualElement;
|
||||
prop(value?: any): (value?: any) => any;
|
||||
withAttr(property: string, callback: (value: any) => void): (e: Event) => any;
|
||||
module(rootElement: Element, module: MithrilModule): void;
|
||||
module(rootElement: Node, module: MithrilModule): Object;
|
||||
trust(html: string): String;
|
||||
render(rootElement: Element, children?: any): void;
|
||||
render(rootElement: HTMLDocument, children?: any): void;
|
||||
|
|
@ -55,10 +55,10 @@ interface MithrilXHROptions {
|
|||
unwrapError?(data: any): any;
|
||||
serialize?(dataToSerialize: any): string;
|
||||
deserialize?(dataToDeserialize: string): any;
|
||||
extract?(xhr: XMLHttpRequest, options: MithrilXHROptions);
|
||||
extract?(xhr: XMLHttpRequest, options: MithrilXHROptions): string;
|
||||
type?(data: Object): void;
|
||||
config?(xhr: XMLHttpRequest, options: MithrilXHROptions)
|
||||
config?(xhr: XMLHttpRequest, options: MithrilXHROptions): XMLHttpRequest;
|
||||
}
|
||||
|
||||
declare var Mithril: MithrilStatic;
|
||||
declare var m: MithrilStatic;
|
||||
declare var m: MithrilStatic;
|
||||
|
|
|
|||
33
mithril.js
33
mithril.js
|
|
@ -456,6 +456,7 @@ Mithril = m = new function app(window, undefined) {
|
|||
modules[index] = module
|
||||
controllers[index] = new module.controller
|
||||
m.endComputation()
|
||||
return controllers[index]
|
||||
}
|
||||
}
|
||||
m.redraw = function(force) {
|
||||
|
|
@ -802,36 +803,6 @@ Mithril = m = new function app(window, undefined) {
|
|||
}
|
||||
function identity(value) {return value}
|
||||
|
||||
function serializeArray(array, prefix){
|
||||
var idx, out = []
|
||||
for (idx in array) {
|
||||
var formatted = (prefix ? prefix : "") + "[]"
|
||||
if (prefix && typeof array[idx] === "object") formatted = formatted.replace(/\[\]$/i, "[" + idx + "]")
|
||||
if (typeof array[idx] === "object" && JSON.stringify(array[idx]) === "{}") continue
|
||||
if (array[idx] instanceof Array) out.push(serializeArray(array[idx], formatted))
|
||||
else if(typeof array[idx] === "object") out.push(serializeObject(array[idx], formatted))
|
||||
else out.push(encodeURIComponent(formatted) + "=" + encodeURIComponent(array[idx]))
|
||||
}
|
||||
return out.join("&")
|
||||
}
|
||||
|
||||
function serializeObject(obj, prefix) {
|
||||
var key, out = []
|
||||
for (key in obj) {
|
||||
var formatted = prefix ? prefix + "[" + key + "]" : key
|
||||
if (obj[key] instanceof Array) {
|
||||
if(obj[key].length < 1) continue
|
||||
out.push(serializeArray(obj[key], formatted))
|
||||
}
|
||||
else if(typeof obj[key] === "object") {
|
||||
if(JSON.stringify(obj[key]) === "{}") continue
|
||||
out.push(serializeObject(obj[key], formatted))
|
||||
}
|
||||
else out.push(encodeURIComponent(formatted) + "=" + encodeURIComponent(obj[key]))
|
||||
}
|
||||
return out.join("&")
|
||||
}
|
||||
|
||||
function ajax(options) {
|
||||
if (options.dataType && options.dataType.toLowerCase() === "jsonp") {
|
||||
var callbackKey = "mithril_callback_" + new Date().getTime() + "_" + (Math.round(Math.random() * 1e16)).toString(36)
|
||||
|
|
@ -872,7 +843,7 @@ Mithril = m = new function app(window, undefined) {
|
|||
+ (options.url.indexOf("?") > 0 ? "&" : "?")
|
||||
+ (options.callbackKey ? options.callbackKey : "callback")
|
||||
+ "=" + callbackKey
|
||||
+ "&" + serializeObject(options.data || {})
|
||||
+ "&" + buildQueryString(options.data || {})
|
||||
window.document.body.appendChild(script)
|
||||
}
|
||||
else {
|
||||
|
|
|
|||
|
|
@ -34,20 +34,21 @@ function testMithril(mock) {
|
|||
mock.requestAnimationFrame.$resolve()
|
||||
|
||||
var root1 = mock.document.createElement("div")
|
||||
m.module(root1, {
|
||||
var mod1 = m.module(root1, {
|
||||
controller: function() {this.value = "test1"},
|
||||
view: function(ctrl) {return ctrl.value}
|
||||
})
|
||||
|
||||
var root2 = mock.document.createElement("div")
|
||||
m.module(root2, {
|
||||
var mod2 = m.module(root2, {
|
||||
controller: function() {this.value = "test2"},
|
||||
view: function(ctrl) {return ctrl.value}
|
||||
})
|
||||
|
||||
mock.requestAnimationFrame.$resolve()
|
||||
|
||||
return root1.childNodes[0].nodeValue === "test1" && root2.childNodes[0].nodeValue === "test2"
|
||||
return (root1.childNodes[0].nodeValue === "test1" && root2.childNodes[0].nodeValue === "test2")
|
||||
&& (mod1.value && mod1.value === "test1") && (mod2.value && mod2.value === "test2")
|
||||
})
|
||||
|
||||
//m.withAttr
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue