jQuery - Zachowanie tablicy js i listy obiektów DOM w zsynchronizowaniu?

Question

Powiedzmy mam tablicę obiektów

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

Chcę teraz mapować że do listy 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> 

zakładamy dodam kolejny obiekt do mojego tablicy, chcę mieć nowy <li> również został dodany do listy. Odwrotnie, kiedy I $('.that-css-class').remove() jeden z elementów listy, chcę, aby go również w tablicy.

Chciałbym zachować go w jQuery, ponieważ nie chcę wprowadzać innych ram do projektu.

Pomoc bardzo doceniona, robię to w mojej głowie. Dzięki.

Answer 1

Coś w tym stylu? : 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); 

Selector sposób:

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'); 

Answer 2

nie wiem co twój dokładny przypadek użycia jest jednak zachowując swoje dane i widok (tzn Dom) w synchronizacji jest traktowane bardzo dobrze przez backbone.js

można zobaczyć następujące przykładową aplikację, aby zobaczyć, jak model, Gromadzenie i Zobacz służą do przechowywania danych JSON przechowywane w localStorage zsynchronizowane z tym, co jest wyświetlane użytkownikowi za pośrednictwem Domu

Demo i annotated source

Ale to tylko część funkcjonalności dostarczanej przez backbone.js które mogą być osadzone w sposób pojedyncza biblioteka, tak jak sugerujesz . Nie znam żadnej takiej biblioteki.