diff --git a/docs/simple-application.md b/docs/simple-application.md index bec3d9a8..e715d0f8 100644 --- a/docs/simple-application.md +++ b/docs/simple-application.md @@ -13,14 +13,14 @@ First let's create an entry point for the application. Create a file `index.html My Application - + ``` The `` line indicates this is an HTML 5 document. The first `charset` meta tag indicates the encoding of the document and the `viewport` meta tag dictates how mobile browsers should scale the page. The `title` tag contains the text to be displayed on the browser tab for this application, and the `script` tag indicates what is the path to the Javascript file that controls the application. -We could create the entire application in a single Javascript file, but doing so would make it difficult to navigate the codebase later on. Instead, let's split the code into *modules*, and assemble these modules into a *bundle* `app.js`. +We could create the entire application in a single Javascript file, but doing so would make it difficult to navigate the codebase later on. Instead, let's split the code into *modules*, and assemble these modules into a *bundle* `bin/app.js`. There are many ways to setup a bundler tool, but most are distributed via NPM. In fact, most modern Javascript libraries and tools are distributed that way, including Mithril. NPM stands for Node.js Package Manager. To download NPM, [install Node.js](https://nodejs.org/en/); NPM is installed automatically with it. Once you have Node.js and NPM installed, open the command line and run this command: @@ -61,7 +61,7 @@ module.exports = User Next we create a function that will trigger an XHR call. Let's call it `loadList` ```javascript -// models/User.js +// src/models/User.js var m = require("mithril") var User = { @@ -77,7 +77,7 @@ module.exports = User Then we can add an `m.request` call to make an XHR request. For this tutorial, we'll make XHR calls to the [REM](http://rem-rest-api.herokuapp.com/) API, a mock REST API designed for rapid prototyping. This API returns a list of users from the `GET http://rem-rest-api.herokuapp.com/api/users` endpoint. Let's use `m.request` to make an XHR request and populate our data with the response of that endpoint. ```javascript -// models/User.js +// src/models/User.js var m = require("mithril") var User = { @@ -112,15 +112,17 @@ Now, let's create a view module so that we can display data from our User model Create a file called `src/views/UserList.js`. First, let's include Mithril and our model, since we'll need to use both: ```javascript +// src/views/UserList.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") ``` Next, let's create a Mithril component. A component is simply an object that has a `view` method: ```javascript +// src/views/UserList.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { view: function() { @@ -135,7 +137,7 @@ Let's use Mithril hyperscript to create a list of items. Hyperscript is the most ```javascript var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { view: function() { @@ -149,8 +151,9 @@ The `".user-list"` string is a CSS selector, and as you would expect, `.user-lis Now, let's reference the list of users from the model we created earlier (`User.list`) to dynamically loop through data: ```javascript +// src/views/UserList.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { view: function() { @@ -168,8 +171,9 @@ Since `User.list` is a Javascript array, and since hyperscript views are just Ja The problem, of course, is that we never called the `User.loadList` function. Therefore, `User.list` is still an empty array, and thus this view would render a blank page. Since we want `User.loadList` to be called when we render this component, we can take advantage of component [lifecycle methods](lifecycle-methods.md): ```javascript +// src/views/UserList.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { oninit: User.loadList, @@ -189,12 +193,13 @@ Also notice we **didn't** do `oninit: User.loadList()` (with parentheses at the --- -Let's render the view from the entry point file `index.js` we created earlier: +Let's render the view from the entry point file `src/index.js` we created earlier: ```javascript +// src/index.js var m = require("mithril") -var UserList = require("./view/UserList") +var UserList = require("./views/UserList") m.mount(document.body, UserList) ``` @@ -221,7 +226,7 @@ To add styles, let's first create a file called `styles.css` and include it in t - + ``` @@ -249,9 +254,10 @@ Routing means binding a screen to a unique URL, to create the ability to go from We can add routing by changing the `m.mount` call to a `m.route` call: ```javascript +// src/index.js var m = require("mithril") -var UserList = require("./view/UserList") +var UserList = require("./views/UserList") m.route(document.body, "/list", { "/list": UserList @@ -278,14 +284,14 @@ module.exports = { } ``` -Then we can `require` this new module from `index.js` +Then we can `require` this new module from `src/index.js` ```javascript -// index.js +// src/index.js var m = require("mithril") -var UserList = require("./view/UserList") -var UserForm = require("./view/UserForm") +var UserList = require("./views/UserList") +var UserForm = require("./views/UserForm") m.route(document.body, "/list", { "/list": UserList @@ -295,11 +301,11 @@ m.route(document.body, "/list", { And finally, we can create a route that references it: ```javascript -// index.js +// src/index.js var m = require("mithril") -var UserList = require("./view/UserList") -var UserForm = require("./view/UserForm") +var UserList = require("./views/UserList") +var UserForm = require("./views/UserForm") m.route(document.body, "/list", { "/list": UserList, @@ -344,7 +350,7 @@ body,.input,.button {font:normal 16px Verdana;margin:0;} .button:hover {background:#e8e8e8;} ``` -Right now, this component does nothing to respond to user events. Let's add some code to our `User` model in `src/model/User.js`. This is how the code is right now: +Right now, this component does nothing to respond to user events. Let's add some code to our `User` model in `src/models/User.js`. This is how the code is right now: ```javascript // src/models/User.js @@ -408,7 +414,7 @@ Notice we added a `User.current` property, and a `User.load(id)` method which po ```javascript // src/views/UserForm.js var m = require("mithril") -var User = require("./model/User") +var User = require("./models/User") module.exports = { oninit: function(vnode) {User.load(vnode.attrs.id)}, @@ -431,7 +437,7 @@ Now, let's modify the `UserList` view so that we can navigate from there to a `U ```javascript // src/views/UserList.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { oninit: User.loadList, @@ -456,7 +462,7 @@ The form itself still doesn't save when you press "Save". Let's make this form w ```javascript // src/views/UserForm.js var m = require("mithril") -var User = require("../model/User") +var User = require("../models/User") module.exports = { oninit: function(vnode) {User.load(vnode.attrs.id)}, @@ -573,15 +579,15 @@ body,.input,.button {font:normal 16px Verdana;margin:0;} .button:hover {background:#e8e8e8;} ``` -Let's change the router in `index.js` to add our layout into the mix: +Let's change the router in `src/index.js` to add our layout into the mix: ```javascript -// index.js +// src/index.js var m = require("mithril") -var UserList = require("./view/UserList") -var UserForm = require("./view/UserForm") -var Layout = require("./view/Layout") +var UserList = require("./views/UserList") +var UserForm = require("./views/UserForm") +var Layout = require("./views/Layout") m.route(document.body, "/list", { "/list": {