Last active
July 14, 2016 08:31
-
-
Save uchcode/885952921b5dcc3b125de938c8e02ca3 to your computer and use it in GitHub Desktop.
MVR: Model View Reactive pattern
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <h1>Hello world</h1> | |
| <div id="present"></div> | |
| <script> | |
| //////////////////////////////////////////////////////////////////////////////// | |
| // MODEL | |
| class Model { | |
| constructor() { | |
| this.ready = false; | |
| this.complete = false; | |
| } | |
| isReady() { | |
| return ( | |
| !this.ready | |
| && !this.complete | |
| ); | |
| } | |
| isComplete() { | |
| return ( | |
| this.ready | |
| && this.complete | |
| ); | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////// | |
| // VIEW | |
| class View { | |
| present(model) { | |
| var contents = {template:'<div>oops... something went wrong, the system is in an invalid state</div>'}; | |
| if (model.isReady()) { | |
| contents = this.ready({}); | |
| } | |
| if (model.isComplete()) { | |
| contents = this.complete({}); | |
| } | |
| if (!model.isReady() && !model.isComplete()) { | |
| contents = {template:'<div></div>'}; | |
| } | |
| return contents; | |
| } | |
| // | |
| render(contents, intents) { | |
| const callback = (action, parameter) => { | |
| return evt => { | |
| intents[action](parameter); | |
| evt.preventDefault(); | |
| evt.stopPropagation(); | |
| return false; | |
| } | |
| } | |
| const {template, action, parameter} = contents; | |
| const newElement = document.createElement('div'); | |
| newElement.innerHTML = template.trim(); | |
| const form = newElement.getElementsByTagName('form')[0]; | |
| if (form && action && parameter) { | |
| form.addEventListener('submit', callback(action, parameter)); | |
| } | |
| const element = document.getElementById('present'); | |
| if (element.childNodes.length) { | |
| element.replaceChild(newElement.childNodes[0], element.childNodes[0]); | |
| } else { | |
| element.appendChild(newElement.childNodes[0]); | |
| } | |
| } | |
| // | |
| ready(data) { | |
| return { | |
| template: ` | |
| <div> | |
| <p>Ready?</p> | |
| <form> | |
| <div class="form-group"> | |
| <input type="submit" value="Go"> | |
| </div> | |
| </form> | |
| </div>`, | |
| action: 'start', | |
| parameter: {} | |
| }; | |
| } | |
| complete(data) { | |
| return { | |
| template: ` | |
| <div> | |
| <p>Hello! Welcome to the reactive world.</p> | |
| <form> | |
| <div class="form-group"> | |
| <input type="submit" value="Reset"> | |
| </div> | |
| </form> | |
| </div>`, | |
| action: 'init', | |
| parameter: {} | |
| }; | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////// | |
| // APPLICATION | |
| class Application { | |
| constructor(model, view) { | |
| this.model = model; | |
| this.view = view; | |
| } | |
| init(data) { | |
| data.ready = false; | |
| data.complete = false; | |
| this.reactive(data); | |
| } | |
| start(data) { | |
| data.ready = true; | |
| this.reactive(data); | |
| } | |
| stop(data) { | |
| data.complete = true; | |
| this.reactive(data); | |
| } | |
| ////////////////////////////////////////////////////////////////////////////// | |
| // REACTIVE | |
| // データでモデルを更新 | |
| // ビューにモデルを出力 | |
| // モデルから次のアクションを決定 | |
| reactive(data) { | |
| const {model, view, present, render, nap} = this; | |
| present(model, data); | |
| render(model, view, this); | |
| nap(model, this);// execute next action predicate | |
| } | |
| present(model, data) { | |
| if (data.ready !== undefined) { | |
| model.ready = data.ready; | |
| } | |
| if (data.complete !== undefined) { | |
| model.complete = data.complete; | |
| } | |
| } | |
| nap(model, app) { | |
| if (!model.isReady() && !model.isComplete()) { | |
| app.stop({}); | |
| } | |
| } | |
| render(model, view, intents) { | |
| view.render( view.present(model), intents ); | |
| } | |
| } | |
| //////////////////////////////////////////////////////////////////////////////// | |
| // MAIN | |
| (() => { | |
| const model = new Model(); | |
| const view = new View(); | |
| const app = new Application(model, view); | |
| app.init({}); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment