| license: mit |
The data flow graph for this example.
This example shows how to make a simple dynamic Web page using ReactiveModel, D3 4.0 and Bootstrap. When you type in the First Name and Last Name input boxes, the greeting text updates.
Part of a series of examples demonstrating ReactiveModel.
forked from curran's block: ModelJS firstName lastName
Built with blockbuilder.org
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script> | |
| <script src="//datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> | |
| <style> | |
| .container { | |
| margin-top: 170px; | |
| } | |
| #greeting { | |
| font-size: 4em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Use Bootstrap to make a beautiful form. --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <form> | |
| <!-- The firstName input box. --> | |
| <div class="form-group"> | |
| <label for="inputFirstName">First Name</label> | |
| <input class="form-control" id="inputFirstName" placeholder="Enter your first name."> | |
| </div> | |
| <!-- The lastName input box. --> | |
| <div class="form-group"> | |
| <label for="inputLastName">Last Name</label> | |
| <input class="form-control" id="inputLastName" placeholder="Enter your last name."> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- The greeting text. --> | |
| <div class="col-sm-8"> | |
| <p id="greeting"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Construct the model instance. | |
| var my = ReactiveModel(); | |
| // Add firstName and lastName properties. | |
| my("firstName") | |
| ("lastName", ""); | |
| // Set up a reactive function that computes fullName. | |
| my("fullName", function (firstName, lastName){ | |
| return firstName + " " + lastName; | |
| }, "firstName, lastName"); | |
| // Set up a reactive function that computes the greeting. | |
| my("greeting", function (fullName){ | |
| return "Hello " + fullName + "!"; | |
| }, "fullName"); | |
| // Update the DOM when greeting changes. | |
| my(function (greeting){ | |
| d3.select("#greeting").text(greeting); | |
| }, "greeting"); | |
| // Update the firstName property when text is entered. | |
| d3.select("#inputFirstName").on("input", function (e){ | |
| my.firstName(this.value); | |
| }); | |
| // Update the lastName property when text is entered. | |
| d3.select("#inputLastName").on("input", function (e){ | |
| my.lastName(this.value); | |
| }); | |
| </script> | |
| </body> |
