Зацикливание JavaScript получить запросы - PullRequest
Новая
       18

Зацикливание JavaScript получить запросы

2 голосов
/ 22 декабря 2009

У меня вопрос на javascript 101.

Я использую красивую библиотеку графиков (flot) и строю несколько графиков на одной странице. Каждый граф представляет собой div с набором атрибутов, который сообщает графу, откуда взять данные. Например, HTML может быть: 

<div class="line-chart" data-src='/revenue.js'></div>
<div class="scatter-chart" data-src='/users/byweek.js'></div>
<div class="scatter-chart2" data-src='/apps/byweek.js'></div>

Здесь у меня есть два типа диаграмм: разброс и линия. В идеале я мог бы перебирать классы и просто получать соответствующие данные. Однако, я смущен контекстом обратного вызова и не знаю, в каком div я на самом деле, поэтому вместо этого я делаю этот хак в моем JS: 

$(document).ready(function() {

    $('.line-chart').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.line-chart'), [data], { xaxis: { mode: "time" }});
        });
    });

    $('.scatter-chart').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.scatter-chart'), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });

    $('.scatter-chart2').each(function() {
        $.getJSON($(this).attr('data-src'),
        function(data) {
            $.plot($('.scatter-chart2'), [data], { xaxis: { mode: "time" },
                                                  lines: { show: false },
                                                  points: { show: true }
            });
        });
    });
});

Я уверен, что могу это почистить, я просто не понимаю, как это сделать. Основная проблема заключается в том, что $ .plot нужно применять к конкретной диаграмме, против которой getJSON был назван, а не к первой, которую он находит.

Ответы [ 2 ]

3 голосов
/ 22 декабря 2009

Если вы не уверены в контексте обратного вызова, вероятно, будет лучше не использовать этот контекст в любом случае. Вместо этого вы можете использовать контекст вашего each() цикла: 

$('.line-chart').each(function() {
  var self = $(this);
  $.getJSON(self.attr('data-src'),
    function(data) {
        $.plot(self, [data], { xaxis: { mode: "time" }});
    });
});
0 голосов
/ 22 декабря 2009 
$(function() {

    function plotChart (selector,options) {
        $(selector).each(function() {
            var $this = $(this);
            $.getJSON($this.attr('data-src'), function (data) {
                $.plot($this, [data], options);
            });
        });
    }

    plotChart('.line-chart', { xaxis: { mode: "time" });

    plotChart('.scatter-chart', { xaxis: { mode: "time" },
                                  lines: { show: false },
                                 points: { show: true });

    plotChart('.scatter-chart2', { xaxis: { mode: "time" },
                                   lines: { show: false },
                                  points: { show: true });

});

немного чище.

...