forked from jonathanpeterwu/oojs_breakout
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mvc_app.js
123 lines (84 loc) · 2.69 KB
/
mvc_app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// =============DOM Initialization================
document.addEventListener("DOMContentLoaded", function() {
initializeApp();
});
function initializeApp(){
var model = new Model()
var view = new View(model)
var controller = new Controller(view, model)
controller.view.setListeners(controller)
}
// =============Model=============================
var User = function(name, username, gravatar, email, repos){
this.name = name;
this.username = username;
this.gravatar = gravatar;
this.email = email;
this.repos = repos
}
var Model = function(){
this.collection = []
}
Model.prototype = {
createUser : function(name, username, gravatar, email, repos) {
user = new User(name, username, gravatar, email, repos);
this.collection.push(user);
}
}
// =============Controller=============================
var Controller = function(view, model){
this.view = view;
this.model = model;
}
Controller.prototype = {
startGithubAjax: function(username, controller){
"use strict";
var githubUrl = 'https://api.github.com/users/' + username
$.ajax({
url: githubUrl,
type: 'GET',
dataType: 'json',
data: {}
}).done(function(result) {
controller.initializeUser(result);
console.log("success", result);
}).fail(function() {
console.log("error");
}).always(function() {
console.log("complete");
});
},
initializeUser: function(result){
"use strict";
this.model.createUser(result.name, result.login, result.avatar_url, result.email, result.public_repos)
this.view.renderUser()
},
queryUser: function(event) {
"use strict";
event.preventDefault()
var username = $('.form').serialize().split('=')[1];
console.log(username)
return username
}
}
//=======================View===================================
var View = function(model){
this.model = model;
}
View.prototype = {
setListeners: function(controller) {
"use strict";
var callback = controller.startGithubAjax;
var queryUserFunction = controller.queryUser;
$('.form').on('submit', function(event){
var username = queryUserFunction(event);
callback(username, controller);
})
},
renderUser: function () {
"use strict";
var i = this.model.collection.length - 1;
var userTemplate = "<div id='"+ this.model.collection[i].name +"'><h1>" + this.model.collection[i].name + "</h1><p>" + this.model.collection[i].username +"</p><p>" + this.model.collection[i].email+ "</p><p>Repos: " + this.model.collection[i].repos+ "</p><img src='"+ this.model.collection[i].gravatar +"' alt='github image' height='300' width='300'</img> </div>";
$('.jumbotron').append(userTemplate)
}
}