vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove fat ctrl usage from docs

Browse source
This commit is contained in:
Leo Horie 2014-09-27 18:47:04 -04:00
parent db88ec4268
commit 3e8896a6d2
5 changed files with 29 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/getting-started.md
View file

@ -286,12 +286,14 @@ The difference, aside from avoiding an anonymous function, is that the `m.withAt
In addition to bi-directional data binding, we can also bind parameterized functions to events: In addition to bi-directional data binding, we can also bind parameterized functions to events:
```javascript ```javascript
m("button", {onclick: todo.vm.add.bind(todo.vm, todo.vm.description)}, "Add") var vm = todo.vm
m("button", {onclick: vm.add.bind(vm, vm.description)}, "Add")
``` ```
In the code above, we are simply using the native Javascript `Function::bind` method. This creates a new function with the parameter already set. In functional programming, this is called [*partial application*](http://en.wikipedia.org/wiki/Partial_application). In the code above, we are simply using the native Javascript `Function::bind` method. This creates a new function with the parameter already set. In functional programming, this is called [*partial application*](http://en.wikipedia.org/wiki/Partial_application).
The `todo.vm.add.bind(todo.vm, todo.vm.description)` expression above returns a function that is equivalent to this code: The `vm.add.bind(vm, vm.description)` expression above returns a function that is equivalent to this code:
```javascript ```javascript
onclick: function(e) { onclick: function(e) {

14
docs/mithril.module.md
View file

@ -29,14 +29,20 @@ Modules and namespaces are often used interchangeably, but namespaces that do no
You can make anonymous modules out of existing classes You can make anonymous modules out of existing classes
```javascript ```javascript
//controller class //model object
var dashboardController = function() { var dashboardViewModel = {};
dashboardViewModel.init = function() {
this.greeting = "Hello"; this.greeting = "Hello";
}; };
//controller class
var dashboardController = function() {
dashboardViewModel.init();
};
//view class //view class
var dashboardView = function(ctrl) { var dashboardView = function() {
return m("h1", ctrl.greeting); return m("h1", dashboardViewModel.greeting);
}; };
//initialize an anonymous module //initialize an anonymous module

2
docs/mithril.render.md
View file

@ -77,7 +77,7 @@ app.bindOnce = new function() {
} }
//here's the view //here's the view
app.view = function(ctrl) { app.view = function() {
m(".layout", [ m(".layout", [
app.bindOnce(function() { app.bindOnce(function() {
//this only runs once in order to boost performance //this only runs once in order to boost performance

17
docs/practices.md
View file

@ -33,19 +33,24 @@ var app = {};
app.PageList = function() { app.PageList = function() {
return m.request({method: "GET", url: "pages.json"}); return m.request({method: "GET", url: "pages.json"});
}; };
```
```javascript app.vm = {};
//app.controller.js app.vm.init = function() {
app.controller = function() {
this.pages = new app.PageList(); this.pages = new app.PageList();
}; };
``` ```
```javascript
//app.controller.js
app.controller = function() {
app.vm.init();
};
```
```javascript ```javascript
//app.view.js //app.view.js
app.view = function(ctrl) { app.view = function() {
return ctrl.pages().map(function(page) { return app.vm.pages().map(function(page) {
return m("a", {href: page.url}, page.title); return m("a", {href: page.url}, page.title);
}); });
}; };

6
docs/tools.md
View file

@ -17,11 +17,11 @@ It is useful for teams where styling and functionality are done by different peo
The tool allows you to write code like this: The tool allows you to write code like this:
```javascript ```javascript
todo.view = function(ctrl) { todo.view = function() {
return <html> return <html>
<body> <body>
<input onchange={m.withAttr("value", ctrl.description)} value={ctrl.description()}/> <input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
<button onclick={ctrl.add.bind(ctrl, ctrl.description)}>Add</button> <button onclick={app.vm.add}>Add</button>
</body> </body>
</html> </html>
}; };