-
-
Save vssn/be62f0a85fe5e7f01506c8afea513548 to your computer and use it in GitHub Desktop.
Super simple one-way data-binding
This file contains 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
| /** | |
| * follows a path on the given data to retrieve a value | |
| * | |
| * @example | |
| * var data = { foo : { bar : "abc" } }; | |
| * followPath(data, "foo.bar"); // "abc" | |
| * | |
| * @param {Object} data the object to get a value from | |
| * @param {String} path a path to a value on the data object | |
| * @return the value of following the path on the data object | |
| */ | |
| function followPath(data, path) { | |
| return path.split(".").reduce(function(prev, curr) { | |
| return prev && prev[curr]; | |
| }, data); | |
| } | |
| /** | |
| * sets value of an element based on it's data-value attribute | |
| * | |
| * @param {Object} data the data source | |
| * @param {Element} element the element | |
| */ | |
| function bindSingleElement(data, element) { | |
| var path = element.getAttribute("data-value"); | |
| element.innerText = followPath(data, path); | |
| } | |
| /** | |
| * Binds data object to an element. Allows arbitrary nesting of fields | |
| * | |
| * @example | |
| * <div class="user"> | |
| * <p data-value="name"></p> | |
| * </div> | |
| * | |
| * var element = document.querySelector(".user"); | |
| * bind({ name : "Nick" }, element); | |
| * | |
| * @param {Object} data the data to bind to an element | |
| * @param {Element} element the element to bind data to | |
| */ | |
| function bind(data, element) { | |
| var holders = element.querySelectorAll("[data-value]"); | |
| [].forEach.call(holders, bindSingleElement.bind(null, data)); | |
| } |
This file contains 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
| var user = { | |
| "name" : "Nick", | |
| "favourites" : { | |
| "movie" : "foo", | |
| "music" : "bar" | |
| } | |
| } | |
| bind(user, document.querySelector(".user")); |
This file contains 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
| <div class="user"> | |
| <h3 data-value="name"></h3> | |
| <p>Fave Movie: <span data-value="favourites.movie"></span></p> | |
| <p>Fave Music: <span data-value="favourites.music"></span></p> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment