jQuery - js配列とDOMオブジェクトのリストを同期した状態に保つ？

Question

のは、私は今htmlのリストにそれをマッピングするオブジェクト

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

の配列を持っているとしましょう：

<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()のリスト項目の1つになってしまった場合、それも配列内に残しておきたいのです。

私はプロジェクトに別のフレームワークを導入したくないので、jQueryに残しておきたいと思います。

大変お手伝いしておりますが、これは私の頭の中にあります。 ありがとうございました。

Answer 1

これは何ですか？ ：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'); 

Answer 2

私はあなたの正確なユースケースはなく、同期して（すなわちDOM）あなたのデータとビューを保っているのか分からないがbackbone.js

ことで、非常にうまく処理されてあなたはどのようにモデルを参照するには、次の例のアプリを見ることができ、収集とビューは、DOM

Demoと

annotated sourceを介してユーザに表示される内容と同期してのlocalStorageに保存されたJSONデータを維持するために使用される。しかし、これは中に埋め込むことができBACKBONE.JSが提供する機能のほんの一部ですされていますあなたが示唆しているように単一の図書館。私はそのような図書館を知らない。