Created
April 26, 2016 20:55
-
-
Save bhalash/53e50f65a58dc8f5424729cabb8df76e to your computer and use it in GitHub Desktop.
Observers
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Observer Test</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <table id="people"> | |
| <thead> | |
| <tr> | |
| <td class="col-1">Name</td> | |
| <td class="col-2">Email</td> | |
| <td class="col-3">Phone</td> | |
| <td class="col-4">Options</td> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="person" data-id="0" data-name="Morbo the Annihilator" data-email="[email protected]" data-phone="0123456789"> | |
| <td>Morbo the Annihilator</td> | |
| <td>[email protected]</td> | |
| <td>0123456789</td> | |
| <td> | |
| <a data-action="edit" href="">edit</a> | |
| <a data-action="delete" href="">delete</a> | |
| </td> | |
| </tr> | |
| <tr class="person" data-id="1" data-name="Turanga Leela" data-email="[email protected]" data-phone="0123456789"> | |
| <td>Turanga Leela</td> | |
| <td>[email protected]</td> | |
| <td>0123456789</td> | |
| <td> | |
| <a data-action="edit" href="">edit</a> | |
| <a data-action="delete" href="">delete</a> | |
| </td> | |
| </tr> | |
| <tr class="person" data-id="2" data-name="Lord Nibbler" data-email="[email protected]" data-phone="0123456789"> | |
| <td>Lord Nibbler</td> | |
| <td>[email protected]</td> | |
| <td>0123456789</td> | |
| <td> | |
| <a data-action="edit" href="">edit</a> | |
| <a data-action="delete" href="">delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <form id="form"> | |
| <input type="text" name="name" id="name"> | |
| <input type="text" name="email" id="email"> | |
| <input type="text" name="phone" id="phone"> | |
| </form> | |
| <script src="jquery-1.12.3.min.js"></script> | |
| <script src="observers.js"></script> | |
| </body> | |
| </html> |
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
| (function($) { | |
| var observer = $({}); | |
| var actions = { | |
| trigger: 'publish', | |
| on: 'subscribe', | |
| off: 'unsubscribe' | |
| }; | |
| $.each(actions, function(key, value) { | |
| $[value] = function() { | |
| observer[key].apply(observer, arguments); | |
| } | |
| }); | |
| })(jQuery); | |
| /** | |
| * Action Link Clicks | |
| */ | |
| $('#people').on('click', '.person', function(event) { | |
| var action = $(event.target).data('action'); | |
| if (action) { | |
| event.preventDefault(); | |
| $.publish('person/' + action, [this, $(this).data()]); | |
| } | |
| }); | |
| /** | |
| * Action: Edit | |
| */ | |
| function populateForm(event, data, element) { | |
| console.log('awdawda'); | |
| $('#form').data('id', data.id); | |
| $.each(['name', 'email', 'phone'], function(i, v) { | |
| $('#' + v).val(data[v]); | |
| }); | |
| } | |
| $.subscribe('person/edit', populateForm); | |
| $.subscribe('person/delete', function(event, element, data) { | |
| $(element).remove(); | |
| }); | |
| // $('#form').on('person/edit', function(event, element) { | |
| // var data = $(element).data(); | |
| // | |
| // $(this).data('id', data.id); | |
| // | |
| // $.each(['name', 'email', 'phone'], function(i, v) { | |
| // $('#' + v).val(data[v]); | |
| // }); | |
| // }); | |
| // | |
| // #<{(|* | |
| // * Action: Delete | |
| // |)}># | |
| // | |
| // $('#form').on('person/delete', '#form', function(event, element) { | |
| // var data = $(element).data(); | |
| // | |
| // if ($(this).data('id') === data.id) { | |
| // $(this).children('input').val(''); | |
| // $(this).removeData('id'); | |
| // } | |
| // }); |
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
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0; | |
| min-height: 100vh; | |
| } | |
| table, form { | |
| flex: 0 1 auto; | |
| width: 75vw; | |
| } | |
| thead td { | |
| font-weight: bold; | |
| } | |
| form { | |
| display: flex; | |
| margin-top: 1rem; | |
| flex-direction: row; | |
| } | |
| input { | |
| flex: 1; | |
| font-size: 1rem; | |
| padding: 0.5rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment