jQuery - 让js数组和DOM对象列表保持同步？

[{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>也添加到列表中。相反，当我列出其中的一个项目时，我希望它也能在数组中消失。

我想保留在jQuery中，因为我不想向项目中引入另一个框架。

帮助非常感谢，这一直在我的脑海里。谢谢。

来源

2012-03-29 Tilman Köster

你看着[淘汰赛（http://knockoutjs.com/）？它使用MVVM模式来执行DOM模型绑定。 – jrummell 2012-03-29 12:28:46

这样的事情？：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');

来源

2012-03-29 10:13:39

我已经基于数组索引的删除功能，但你可以很容易地适应你的需要。 – 2012-03-29 10:18:14

感谢您提供非常详细的答案。这也是我的方法，但我不喜欢这个事实，即当添加/删除元素时，我必须更新（array和ul）。我想也许有一种更优雅的方式。不幸的是，jQuery不支持像其他框架一样的直接数据绑定（我想它也不应该）。 – 2012-03-29 10:20:42

这是另一个基于选择器的版本：http://jsfiddle.net/RZPNG/5/ – 2012-03-29 10:25:09

我不知道您的具体使用情况是什么，但保持你的数据和观点（即DOM）的同步由backbone.js

处理得非常好，您可以看到下面的示例应用程序，看看如何模型，收集和查看用于保持存储在localStorage的是结合通过DOM

Demo和annotated source

显示给用户同步JSON数据但这仅仅是一个由Backbone.js的提供功能的一部分可以嵌入在正如你所建议的那样。我不知道有这样的图书馆。

来源

2012-03-29 09:52:00 amitamb

感谢您的回答。我知道backbone.js，但我想保留jQuery，因为我不想引入另一个框架。也许应该在我的问题中更明确地表述。 – 2012-03-29 09:54:31

jQuery - 让js数组和DOM对象列表保持同步？

回答

相关问题