jQuery - поддержание синхронизации массива и списка объектов DOM?

Question

Допустим, у меня есть массив объектов

[{href: 'some_uri', 'class': 'this-css-class'}, {href: 'another_uri', 'class': 'that-css-class'}]

Теперь я хочу отобразить это в html-списке:

<ul>
  <li class="this-css-class"><a href="some_uri">some_uri</a></li>
  <li class="that-css-class"><a href="another_uri">another_uri</a></li>
</ul>

Предположим, что я добавляю еще один объект в свой массив, я хочу, чтобы новый <li> также был добавлен в список. И наоборот, когда я $('.that-css-class').remove() один из элементов списка, я хочу, чтобы он также исчез в массиве.

Я бы хотел оставить его в jQuery, так как я не хочу вводить другую платформу в проект.

Помощь с благодарностью, это делает мою голову в. Спасибо.

Answer 1

Я не знаю, каков ваш точный вариант использования, но синхронизация ваших данных и представления (т.е. DOM) очень хорошо обрабатывается backbone.js

Вы можете увидеть следующееПример приложения, чтобы увидеть, как Модель, Коллекция и Вид используются для синхронизации данных JSON, хранящихся в localStorage, с тем, что отображается пользователю через DOM

Демо и аннотированный источник

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

Answer 2

Что-то в этом роде?: http://jsfiddle.net/RZPNG/4/

var datas = [
    {href: 'some_uri', 'class': 'this-css-class'}, 
    {href: 'another_uri', 'class': 'that-css-class'}
],
  ul = $('ul');

$.each(datas, function(key, value) { // initialize list
    createElement(value);
});

function createElement(elem) {
    ul.append($('<li class=' + elem.class + '><a href="' + elem.href + '">' + elem.href + '</a></li>'));
}

function addElement(elem) {
    datas.push(elem);
    createElement(elem);
}

function removeElement(i) {
    datas.splice(i, 1);
    $(ul.find('li').get(i)).remove();
}

addElement({href: 'foo', 'class': 'bar'});
removeElement(1);

Способ выбора:

var datas = [
    {href: 'some_uri', 'class': 'this-css-class'}, 
    {href: 'another_uri', 'class': 'that-css-class'}
],
  ul = $('ul');

$.each(datas, function(key, value) { // initialize list
    createElement(value);
});

function createElement(elem) {
    ul.append($('<li class=' + elem.class + '><a href="' + elem.href + '">' + elem.href + '</a></li>'));
}

function addElement(elem) {
    datas.push(elem);
    createElement(elem);
}

function removeElement(selector) {
    datas.splice(findElement(selector), 1);
    $(ul.find('li.' + selector)).remove();
}

function findElement(selector) {
    for (var i in datas) {
        if (datas[i].class === selector) {
           return i;   
        }
    }                
}

addElement({href: 'foo', 'class': 'bar'});
removeElement('that-css-class');