jQuery - एक जेएस सरणी और डीओएम ऑब्जेक्ट्स की सूची सिंक में रखते हुए?

Question

मान लीजिए कि मैं वस्तुओं की एक सरणी है

[{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() सूची आइटमों में से एक हूं, तो मैं इसे सरणी में भी जाना चाहता हूं।

मैं इसे 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

मैं नहीं जानता कि क्या अपने सटीक उपयोग मामला है अपने डेटा और सिंक में दृश्य (यानी डोम) रखने लेकिन द्वारा backbone.js

बहुत अच्छी तरह से नियंत्रित किया जाता है आप उदाहरण अनुप्रयोग निम्नलिखित को देखने के लिए देख सकते हैं कि मॉडल, संग्रह और देखें क्या डोम

Demo और annotated source

के माध्यम से उपयोगकर्ता के लिए प्रदर्शित किया जाता है के साथ सिंक में localStorage में संग्रहीत JSON डेटा रखने के लिए उपयोग किया जाता है लेकिन यह सिर्फ backbone.js द्वारा प्रदान की कार्यक्षमता का एक हिस्सा है जो एक में एम्बेड किया जा सकता है जैसा कि आप सुझाव दे रहे हैं एकल पुस्तकालय । हालांकि मुझे ऐसी किसी पुस्तकालय की जानकारी नहीं है।