Создание CRUD для объекта JSON?

Question

Я новичок в разработке javascript, и я столкнулся с проблемой, которая, как я предполагаю, уже решена, но я не знаю, как найти ответ.

Скажем, у меня есть объект JSON следующим образом:

// bagelList.json 
{ 
    "description": "The bagel list. Who brings the bagels on what day.", 
    "list": [ 
     { 
      "date": "Nov 25", 
      "name": "Cory" 
     }, 
     { 
      "date": "Nov 26", 
      "name": "Jordan" 
     } 
    ] 
} 

Я хочу, чтобы отобразить информацию в этом объекте на веб-странице, но я хочу, чтобы отобразить его прелестно - в отличие от прямой печати с JSON. Я также хочу, чтобы позволить пользователям обновлять список, добавлять новые записи, изменить описание и т.д.

можно отобразить данные следующим образом:

$(document).ready(function() { 

    $.getJSON('bagelList.json', function(bagelData) { 

     var items = []; 
     $.each(bagelData.list, function(index, bagelAssignment) { 
      items.push("<tr><td contenteditable="true">" 
         + bagelAssignment.date + "</td><td>" 
         + bagelAssignment.name + "</td></tr>"); 
     }); 

     $("tbody#schedule").append(items.join("")); 

    }); 

}); 

Однако все данные теперь немного запутанным , по своей природе внедряется в html. Я мог бы написать парсер, чтобы просмотреть все записи таблицы и воссоздать оригинальный объект JSON после того, как пользователь обновил элементы, но это похоже на kludge.

Каков правильный способ моделирования данных, чтобы его можно было отобразить привлекательным образом, но сохранить способность читать и писать с объекта?

Я предполагаю, что эта проблема уже решена много раз раньше, поэтому я не хочу заходить слишком далеко по пути написания CRUD, чтобы узнать, что мне просто нужно было делать XYZ, и это просто работает.

Answer 1

есть такие проекты, как JTable (http://www.jtable.org/Demo/Filtering, https://github.com/hikalkan/jtable)

Но мои мысли по этому поводу - я думаю, что есть ограниченное количество случаев, когда вы будете нуждаться в таблице с чистыми операциями CRUD; обычно это будет что-то более жидкое, более конкретное для вашей проблемы/домена. Я бы пошел к Angular. Кто-то также упомянул backbone.js, но я думаю, что в угловой он будет плавным.

Если вы спуститесь по угловому пути, я рекомендую egghead, там есть отличные видео.