Есть ли более чистый способ анализа моих данных HTML?

Question

В настоящее время я заполняю список полей (между прочим), добавляя HTML. Я получаю данные PHP от JSON через нагрузку AJAX, это позволяет мне больше гибкости на странице с точки зрения перезагрузки вещей и вырезания ненужных загрузок страниц.

function tracker_list(){ 
    //get a reference to the select element 
    $list = $('#tracker_list'); 
    //remove entries 
    $('#tracker_list').empty(); 
    //request the JSON data and parse into the select element 
    $.ajax({ 
     url: 'data/JSON_dashboard.php', 
     dataType:'JSON', 
     success:function(data){ 
     //iterate over the data and append a select option 
     $.each(data, function(key, val){ 
      $list.append('<li class="list-group-item"><div style="background: url(\''+val.profile_photo_path+'\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="'+val.last_activity+'"></span></span><strong><a href="#">'+val.first_name+' '+val.last_name+'</a></strong> was on the <strong><a href="#">'+val.last_page+'</a></strong><br /><span class="text-muted small">'+val.since+'</span></li>'); 
      var total = val.total; 
     $("#tracker_num").html("<strong>"+total+"</strong>"); // Replace total users number in head 
     }) 


     }, 
     error:function(){ 
     } 
    }); 
    }; 

Если я собираюсь постоянно делать это, есть ли лучший способ? Как только я использую новую строку на всем этом HTML, скрипт ломается, и код начинает становиться совсем нечитаемым.

Answer 1

Для более чистых и более эффективных способов.

HTML-манипуляция для каждого элемента стоит дорого. Создайте массив, надавите на него, в конце соедините все элементы. И общее количество может быть за пределами каждой итерации.

function tracker_list() { 
    //get a reference to the select element 
    $list = $('#tracker_list'); 
    //request the JSON data and parse into the select element 
    $.ajax({ 
     url: 'data/JSON_dashboard.php', 
     dataType: 'JSON', 
     success: function(data) { 
      //remove entries 
      $list.empty(); 

      var strArr = []; 
      //iterate over the data and append a select option 
      $.each(data, function(key, val) { 
       strArr.push('<li class="list-group-item"><div style="background: url(\'' + val.profile_photo_path + '\');margin-right:10px;margin-left:7px" class="image-circle-30 pull-left"></div><span class="text-muted"><span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="' + val.last_activity + '"></span></span><strong><a href="#">' + val.first_name + ' ' + val.last_name + '</a></strong> was on the <strong><a href="#">' + val.last_page + '</a></strong><br /><span class="text-muted small">' + val.since + '</span></li>'); 
       .append(); 
      }) 

      $list.append(strArr.join("")); 

      $("#tracker_num").html("<strong>" + data[data.length - 1].total + "</strong>"); // Replace total users number in head 

     }, 
     error: function() {} 
    }); 
}; 

Answer 2

Чтобы добавить разрывы строк вы можете создать HTML в другой вар и добавить в HTML:

var html = '<li class="list-group-item"><div style="background'; 
html = html + 'url(\''+val.profile_photo_path+'\');margin-right'; 
html = html + '10px;margin-left:7px" class="image-circle-30 pull-left">'; 
// and so on... 
$list.append(html) 

В качестве альтернативы вы можете построить HTML с JQuery, как это (только первые части):

var html = $('<li />') 
    .addClass('list-group-item') 
    .append($('<div />') 
     .css({ 
      background : 'url('+val.profile_photo_path+')', 
      marginRight : 10, 
      marginLeft : 7 
     }) 
     .addClass('image-circle-30 pull-left') 
    ) 
    .append($('<span />') 
     .addClass('text-muted') 
     .append($('<span />') 
      .addClass('glyphicon glyphicon-time timestamp pull-right') 
      .data({ 
       toggle : 'tooltip', 
       placement : 'bottom' 
      }) 
      .prop({ 
       title : val.last_activity 
      }) 
    ); 
    // and so on ... 
    $list.append(html) 

Но я предлагаю вам использовать ту tempating двигатель, как JSRender или Mustache.

Answer 3

Is there a cleaner way to parse my HTML data?

Да, уборщик способ называется HTML шаблонный, например с Handlebars.js. Вы начинаете с написания части HTML, в которой вы нуждаетесь, в специальный тег сценария, с заполнителями для отдельных значений, которые вы хотите отобразить.

Total: <strong id="tracker_num"></strong> 

<script type="text/x-handlebars-template" id="trackerlist-template"> 
    {{#each .}} 
    <li class="list-group-item"> 
    <div class="profile-image" class="image-circle-30 pull-left" style="background-image: url('{{ profile_photo_path }}'); margin-right:10px; margin-left:7px;"></div> 
    <span class="text-muted"> 
     <span class="glyphicon glyphicon-time timestamp pull-right" data-toggle="tooltip" data-placement="bottom" title="{{last_activity}}"></span> 
    </span> 
    <strong><a href="#">{{first_name}} {{last_name}}</a></strong> was on the 
    <strong><a href="#">{{last_page}}</a></strong><br /> 
    <span class="text-muted small">{{since}}</span> 
    </li> 
    {{/each}} 
</script> 

Затем вы можете использовать этот шаблон в коде JavaScript и не заморачиваться с созданием HTML, поскольку код и презентации будут четко разделяются.

var trackerlistTemplate = Handlebars.compile($("#trackerlist-template").html()); 

function getTrackerList() { 
    return $.get('data/JSON_dashboard.php').fail(function() { 
     console.err("could not retrieve tracker list"); 
    }); 
} 

function renderTrackerList(data) { 
    $('#tracker_list').html(trackerlistTemplate(data)); 
    $("#tracker_num").text(data.length); 
} 

$("#refreshButton").click(function() { 
    getTrackerList().done(renderTrackerList); 
}); 

Примечания

• Вам не нужно использовать $.ajax() для такого простого запроса GET. $.get() намного короче и будет работать так же хорошо.
• Возможно, было бы полезно разделить функцию, которая извлекает данные из функции, которая работает с данными. Это может быть легко достигнуто с помощью jQuery, поскольку вы можете вернуть объект XHR из функции сбора данных и работать с ним в другом месте, как показано выше.