jQuery - Giữ một mảng js và danh sách đối tượng DOM được đồng bộ hóa?

Question

Hãy nói rằng tôi có một mảng của các đối tượng

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

bây giờ tôi muốn bản đồ đó vào một danh sách 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> 

Giả sử tôi thêm một đối tượng khác để mảng của tôi, tôi muốn có một mới <li> cũng được thêm vào danh sách. Ngược lại, khi tôi $('.that-css-class').remove() một trong các mục trong danh sách, tôi cũng muốn nó được sử dụng trong mảng đó.

Tôi muốn giữ nó trong jQuery, vì tôi không muốn giới thiệu một khuôn khổ khác cho dự án.

Giúp đánh giá rất cao, điều này đã được thực hiện đầu của tôi. Cảm ơn.

Answer 1

Điều gì đó tương tự? : 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 cách:

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

Tôi không biết những gì trường hợp sử dụng chính xác của bạn là nhưng giữ dữ liệu và xem (tức là DOM) đồng bộ của bạn được xử lý rất tốt bởi backbone.js

Bạn có thể thấy sau ví dụ ứng dụng để xem có bao Model, Thu thập và Xem được sử dụng để giữ cho dữ liệu JSON lưu trữ trong localStorage đồng bộ với những gì được hiển thị cho người dùng thông qua DOM

Demo và annotated source

Nhưng điều này chỉ là một phần của chức năng được cung cấp bởi backbone.js có thể được nhúng vào trong một thư viện đơn như bạn đang đề xuất . Tôi không biết bất kỳ thư viện nào như vậy.