Javascript сортировка архитектуры подход к дизайну

Question

Я работаю с jquery сортируемых связанных списков, и я планирую попытаться построить небольшой и простой гибкий инструмент с 3 столбцами: отставание, работа, сделано. В Интернете (особая благодарность stackoverflow) я мог найти достаточную информацию для создания базовых элементов, таких как сортируемые столбцы, позиции или сохранение элементов в фоновом контенте через вызовы ajax или использование localstorage, поэтому в следующий раз пользователь может продолжить работу, где он ушел.

Моя основная проблема прямо сейчас - как подойти к контенту для каждой сортируемой/ли. Как структурировать и проектировать основную информацию, например фотографии, текст или значки, включенные в lis. мой вопрос к stackoverflow связан с архитектурным подходом. Как я должен структурировать контент, чтобы я мог сохранить его на бэкэнд, я могу его редактировать и т. Д. Как был подход к реальным веб-приложениям.

Я выяснял что-то вроде этого (я публикую очень базовую структуру для упрощения), но я не знаю, правильно ли я делаю.

<div id="sortable-1"> 

    <ul class="sortable-list" id="list-1"></ul> 

     <li class="sortable-item' id="1"> 
      <h2 class="title">Event</h2> 
      <p class="date">Friday, August 18, 2009</p> 
      <p><img src="img/sample.jpg" width="240" height="80" alt=""/></p> 
      <p class="content">Aliquam augue neque, rhoncus et dictum in,mauris.</p> 
     </li> 

     <li></li> 
      ........ 
</div> 

большое спасибо заранее и рассматривает

Answer 1

Чем чаще я делаю это материал, который я обычно начинается с объекта JS и построить документ оттуда. Это позволяет связать каждый элемент с его местоположением DOM, что упрощает редактирование на месте. Я бы не прочь понять, что случилось с этим подходом.

Вы можете выполнить сортировку по ассоциативному массиву objs до (re) записи в документ.

С JQuery:

<div id="sortable-1"> 
    <ul class="sortable-list" id="list-1"></ul> 
</div> 
<script> 
$(function() { 
    var objs = [ 
     { 
      id:1, 
      title:'Event1', 
      date:'Friday, August 18, 2009', 
      imgSrc:'img/sample.jpg', 
      content:'Aliquam augue' 
     },{ 
      id:2, 
      title:'Event2', 
      date:'Friday, August 28, 2009', 
      imgSrc:'img/sample.jpg', 
      content:'Aliquam augue 2' 
     } 
    ]; 

    var l1$ = $('#list-1'); 

    // loop objs data, create elements/append to dom 
    $.each(objs, function(i, obj) { 
     if (!obj) return true; 

     var li$ = $('<li class="sortable-item"/>').attr('id', obj.id).appendTo(l1$); 

     // place element in objs to keep track of its place in dom 
     obj.li$ = li$; 

     $('<h2 class="title"></h2>').text(obj.title).appendTo(li$); 
     $('<p class="date"/>').text(obj.title).appendTo(li$); 
     $('<img width="240" height="80"/>').attr('src', obj.imgSrc).appendTo($('<p/>').appendTo(li$)); 
     $('<p class="content"/>').text(obj.content).appendTo(li$); 
    }); 
}); 
</script>