Discussion :

[DevProg14]

Bonjour ,

Je suis entrain de mettre en place une architecture MVC, j'ai déclarer un model, une view, et un controller. dans le controller je récupère des information via un fichier .json, et je crée des divs dynamiquement afin de les mettre en place dans le html. Cependant je n'arrive à appeler une méthode de la vue à partir du controller et je ne comprend pas l'erreur que j'ai :

voici le controller :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function controllerRestaurant(model, view) {
    this.model  = model;
    this.view   = view;
}
var getRestaurants = function (){
        // Set the global configs to synchronous 
 	   $.ajaxSetup({
        async: false
    });
 
    $.getJSON('restaurants.json', function(data,status) {
        if (status == "success"){
            // parcours sur les restaurants
            $.each(data.restaurants, function(index, d) {
                //parcours sur les ratings
                var ratings = new Array();
                $newDivListGroup = this.view.getListGroup(); // je n'arrive pas à appeler cette méthode de la vue 
                //$newDivListGroup = $("<ul class='list-group'></ul>");
 
                $.each(d.ratings, function(index2, d2) {
                    $newDivListGroup.append(this.view.buildRatings(d2.stars,d2.comment));
                    var comment = new Comment(d2.stars, d2.comment);
                    ratings.push(comment);
                });
 
                this.view.buildRestaurant(index,$newDivListGroup,d.restaurantName,d.address);
                var restaurant = new Restaurant(d.id, d.restaurantName, d.address, d.lat, d.long, ratings);
                this.model.addRestaurant(restaurant);
 
            });
        }else if (status == "timeout"){
            alert("Something is wrong with the connection");
        }else if (status == "error" || status == "parsererror" ){
            alert("An error occured");
        }else{
            alert("datatosend did not change");
        } 
    });

voici la view :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function viewRestaurant(restaurants) {
    this.restaurants = restaurants;
}
var getListGroup = function () {
    return $('<ul class="list-group"></ul>');
}

voici le main :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(function () {
 
 
	var restaurants = new Array();
 
	// MVC
	var model       =  new modelRestaurant(restaurants);
	var view  	     =  new viewRestaurant(restaurants);
	var controller  =  new controllerRestaurant(model, view);
 
	controller.getRestaurants();
});

voici l'erreur que j'ai :

Uncaught TypeError: Cannot read property 'getListGroup' of undefined
at Object.<anonymous> (http://127.0.0.1/projet7/controllerRestaurant.js:53:46)
at Function.each (https://code.jquery.com/jquery-3.2.1.min.js:2:2715)
at Object.success (http://127.0.0.1/projet7/controllerRestaurant.js:50:15)
at i (https://code.jquery.com/jquery-3.2.1.min.js:2:28017)
at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-3.2.1.min.js:2:28783)
at A (https://code.jquery.com/jquery-3.2.1.min.js:4:14035)
at XMLHttpRequest.<anonymous> (https://code.jquery.com/jquery-3.2.1.min.js:4:16323)
at Object.send (https://code.jquery.com/jquery-3.2.1.min.js:4:16670)
at Function.ajax (https://code.jquery.com/jquery-3.2.1.min.js:4:13502)
at Function.r.(anonymous function) [as get] (https://code.jquery.com/jquery-3.2.1.min.js:4:14489)
(anonymous) @ controllerRestaurant.js:53
each @ jquery-3.2.1.min.js:2
(anonymous) @ controllerRestaurant.js:50
i @ jquery-3.2.1.min.js:2
fireWith @ jquery-3.2.1.min.js:2
A @ jquery-3.2.1.min.js:4
(anonymous) @ jquery-3.2.1.min.js:4
send @ jquery-3.2.1.min.js:4
ajax @ jquery-3.2.1.min.js:4
r.(anonymous function) @ jquery-3.2.1.min.js:4
getJSON @ jquery-3.2.1.min.js:4
getRestaurants @ controllerRestaurant.js:47
(anonymous) @ main.js:11
j @ jquery-3.2.1.min.js:2
k @ jquery-3.2.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.2.1.min.js:2
i @ jquery-3.2.1.min.js:2
fireWith @ jquery-3.2.1.min.js:2
fire @ jquery-3.2.1.min.js:2
i @ jquery-3.2.1.min.js:2
fireWith @ jquery-3.2.1.min.js:2
ready @ jquery-3.2.1.min.js:2
S @ jquery-3.2.1.min.js:3

Merci de votre compréhension

[CiTriX]

Bonjour,

C'est parce que vous êtes dans une boucle $.each et donc this référence l'objet restaurant en cours, pas votre contrôleur.

[DevProg14]

Merci beaucoup , problème résolu.