Javascript sortable architecture design approach

Question

jquery sortable connected lists와 함께 작업 중이며 작고 기본적인 민첩한 도구를 세 개의 열로 작성하려고합니다. 백 로그, 작동, 완료. 인터넷 (stackoverflow 특별한 덕분에) 정렬 할 수있는 열, 위치 또는 저장 요소를 같은 기본 정보를 백 엔드 ajax 호출을 통해 또는 localstorage 사용하여 디자인 할 수있는 충분한 정보를 찾을 수 있도록 다음에 사용자가 그가 어디 왼쪽 계속할 수 있습니다.

내 주요 문제는 지금 각 sortable/li에 대한 콘텐츠에 접근하는 방법입니다. 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> 

사전에 대단히 감사하고 더 자주 나는 내가 JS 객체로 시작하고 거기에서 문서를 구축하는 경향이 물건을

Answer 1

을 간주한다. 이렇게하면 각 항목을 DOM 위치에 연관시킬 수 있으므로 내부 편집이 간단 해집니다. 나는이 접근법에 무엇이 잘못되었는지 알지도 못한다.

문서에 쓰기 전에 (다시) 연관 objs 배열을 정렬 할 수 있습니다. 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>