An example of implementing a module pattern with promises
| <body> | |
| <div class="task api-1"></div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> | |
| <script id="user-profile" type="text/template"> | |
| <div class="user"> | |
| <img src="<%= picture %>" alt=""> | |
| <div class="info"> | |
| <h3><%= name.first%> <%= name.last%></h3> | |
| <dl> | |
| <dt>Address:</dt> | |
| <dd><%= location.street%><br/><%= location.zip%> <%= location.city%>, <%= location.state%></dd> | |
| <dt>Phone:</dt> | |
| <dd><%= cell%></dd> | |
| <dt>Email:</dt> | |
| <dd><%= email%></dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </script> | |
| <script src="module-user-promise.js"></script> | |
| </body> |
| (function () { | |
| API = window.API || {}; | |
| API.User = function User(gender) { | |
| var userObject = {}; | |
| var defer = $.Deferred(); | |
| var createProfile = function () { | |
| $('.api-1').append(_.template($('#user-profile').html(), userObject)); | |
| }; | |
| $.getJSON('http://api.randomuser.me/?gender=' + gender, defer.resolve); | |
| defer.then(function (result) { | |
| userObject = result.results[0].user; | |
| }); | |
| return { | |
| getName : function () { | |
| defer.done(function () { | |
| console.log(userObject.name.first + ' ' + userObject.name.last); | |
| }); | |
| }, | |
| getAddress : function () { | |
| defer.done(function () { | |
| console.log(userObject.location); | |
| }); | |
| }, | |
| updateAddress : function (data) { | |
| defer.done(function () { | |
| _.assign(userObject.location, data); | |
| if ($('.user').length) { | |
| $('.user').remove(); | |
| createProfile(); | |
| } | |
| }); | |
| }, | |
| renderProfile : function () { | |
| defer.done(function () { | |
| createProfile(); | |
| }); | |
| } | |
| }; | |
| }; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment