Last active
September 19, 2016 22:32
-
-
Save adamjgrant/b5b03d5e24894adc7610ad22a59a1777 to your computer and use it in GitHub Desktop.
Organized, scoped components https://github.com/adamjgrant/Scoped-Component-Example
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_table_api = function(_$) { | |
return { | |
create: function(user) { | |
_$.router.create(user).then( | |
function() { | |
if (_$.config.verbose) { | |
$_(".alert").html("User created successfully"); | |
} | |
}, | |
function(error) { | |
if (_$.config.verbose) { | |
$_(".alert").html("Could not delete user due to error: " + error); | |
} | |
} | |
); | |
}, | |
read: function(user_id) {}, | |
update: function(user_id) {}, | |
delete: function(user_id) {} | |
} | |
}; |
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_table_configuration = { | |
options: { | |
verbose: true | |
}, | |
ready: function(_$) { | |
_$.store.users.forEach(function() { | |
// ... | |
}); | |
} | |
} |
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_table_events = function(_$) { | |
_$(".create").click(function() { | |
_$.api.create({ | |
first_name: "Please choose a name", | |
last_name: "", | |
status: "" | |
}); | |
_$.api.update(); | |
}); | |
_$(".read").click(function(e) { | |
var user_id = e.target.dataset.userId; | |
_$.api.read(user_id); | |
}); | |
_$(".update").click(function(e) { | |
var user_id = e.target.dataset.userId; | |
_$.api.update(user_id); | |
}); | |
_$(".delete").click(function() { | |
var user_id = e.target.dataset.userId; | |
_$.api.delete(user_id); | |
}); | |
_$(".duplicate").click(function(e) { | |
_$.api.create({ | |
first_name: e.target.dataset.first_name, | |
last_name: e.target.dataset.last_name, | |
status: e.target.dataset.status, | |
}); | |
}); | |
} |
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
$.component.init = [ | |
"user-table", | |
"datepicker", | |
"file-uploader", | |
]; |
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.attendees data-component="user-table" | |
.alert | |
nav | |
ul | |
li | |
a href="#" Create new user | |
table | |
thead | |
tr | |
th First name | |
th Last name | |
th colspan="2" Status | |
tbody | |
template | |
tr | |
td.first-name ... | |
td.last-name ... | |
td.status ... | |
td | |
button.delete Delete | |
button.edit Edit |
Author
adamjgrant
commented
Sep 19, 2016
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment