Publicado em 12 de mai.

Problema com module pattern Jquery

Olá, pessoal. Há um tempo atrás eu mostrei esse código aqui e ele colocava os dados de uma url ashx em um gráfico pie, foi resolvido o problema com a orientação do forum. Agora preciso aplicar Module Pattern nele para plotar o gráfico, sendo que meu método deve ser privado. Nunca havia mexido com esse tipo de coisa, então deve haver alguns erros, peço ajuda de vocês.

<div class ="container">
 <body>
<div><canvas id="grafico" width="80" height="15"></canvas> </div>
 <div id="lista"></div>
 </body>
</div>

var module = $(document).ready(function() {
 var metodoprivado = function() {
 $.ajax({
 url: "http://servicosweb.ibge.gov.br/GetStatus.ashx",
 success: function verstatus(data) {
 var servicos = _.countBy(data, function(x) {
 return x.Status === true ? "on" : "off";
 });
 $.each(data, function imprimirdados(index, item) {
 // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico"));
 if ((item.Status = true)) {
 $("<div>")
 .html(item.Nome + ": " + (item.Status = "ON") + "</p>")
 .insertAfter($("#grafico"));
 } else {
 $("<div>")
 .html(item.Nome + ": " + (item.Status = "OFF") + "</p>")
 .insertAfter($("#grafico"));
 }
 });
 }
 });
 };
 return {
 metodopublico: function() {
 document.getElementById("lista").innerHTML;
 var resultado = [servicos.on, servicos.off];
 var ctx = document.getElementById("grafico").getContext("2d");
 myChart = new Chart(ctx, {
 type: "pie",
 data: {
 labels: ["Serviços online", "Serviços offline"],
 datasets: [
 {
 backgroundColor: ["#FF9900", "#23238E"],
 data: resultado,
 options: {
 animation: {
 animateScale: true
 }
 }
 }
 ]
 }
 });
 return {
 //metodoprivado: metodoprivado,
 metodopublico: function() {
 metodoprivado();
 }
 };
 }
 };
});

//isso eu acho que está errado

module.metodoprivado();
module.metodopublico();

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

<div class ="container"> <body> <div><canvas id="grafico" width="80" height="15"></canvas> </div> <div id="lista"></div> </body> </div> var module = $(document).ready(function() { var metodoprivado = function() { $.ajax({ url: "http://servicosweb.ibge.gov.br/GetStatus.ashx", success: function verstatus(data) { var servicos = _.countBy(data, function(x) { return x.Status === true ? "on" : "off"; }); $.each(data, function imprimirdados(index, item) { // $("<div>").html(item.Nome + ": " + (item.Status ? "ON" : "OFF") + "</p>").insertAfter($("#grafico")); if ((item.Status = true)) { $("<div>") .html(item.Nome + ": " + (item.Status = "ON") + "</p>") .insertAfter($("#grafico")); } else { $("<div>") .html(item.Nome + ": " + (item.Status = "OFF") + "</p>") .insertAfter($("#grafico")); } }); } }); }; return { metodopublico: function() { document.getElementById("lista").innerHTML; var resultado = [servicos.on, servicos.off]; var ctx = document.getElementById("grafico").getContext("2d"); myChart = new Chart(ctx, { type: "pie", data: { labels: ["Serviços online", "Serviços offline"], datasets: [ { backgroundColor: ["#FF9900", "#23238E"], data: resultado, options: { animation: { animateScale: true } } } ] } }); return { //metodoprivado: metodoprivado, metodopublico: function() { metodoprivado(); } }; } }; });