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:
```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).
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
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
```javascript
//controller class
var dashboardController = function() {
//model object
var dashboardViewModel = {};
dashboardViewModel.init = function() {
this.greeting = "Hello";
};
//controller class
var dashboardController = function() {
dashboardViewModel.init();
};
//view class
var dashboardView = function(ctrl) {
return m("h1", ctrl.greeting);
var dashboardView = function() {
return m("h1", dashboardViewModel.greeting);
};
//initialize an anonymous module

2
docs/mithril.render.md
View file

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

17
docs/practices.md
View file

@ -33,19 +33,24 @@ var app = {};
app.PageList = function() {
return m.request({method: "GET", url: "pages.json"});
};
```
```javascript
//app.controller.js
app.controller = function() {
app.vm = {};
app.vm.init = function() {
this.pages = new app.PageList();
};
```
```javascript
//app.controller.js
app.controller = function() {
app.vm.init();
};
```
```javascript
//app.view.js
app.view = function(ctrl) {
return ctrl.pages().map(function(page) {
app.view = function() {
return app.vm.pages().map(function(page) {
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:
```javascript
todo.view = function(ctrl) {
todo.view = function() {
return <html>
<body>
<input onchange={m.withAttr("value", ctrl.description)} value={ctrl.description()}/>
<button onclick={ctrl.add.bind(ctrl, ctrl.description)}>Add</button>
<input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
<button onclick={app.vm.add}>Add</button>
</body>
</html>
};