假设我有一个对象数组
[{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>
。相反,当我$('.that-css-class').remove()
列表项之一时,我希望它也可以在数组中消失。
我想将它保存在jQuery中,因为我不想在项目中引入另一个框架。
非常感谢,我一直在努力。 感谢。
答案 0 :(得分:2)
我不知道您的确切用例是什么,但保持您的数据和视图(即DOM)同步,backbone.js
处理得非常好您可以看到以下示例应用,了解如何使用模型,集合和视图来保存localStorage中存储的JSON数据与通过DOM向用户显示的内容同步
但这只是backbone.js提供的功能的一部分,可以像你建议的那样嵌入到单个库中。我不知道有没有这样的图书馆。
答案 1 :(得分: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');