如何使用 List.js 更新一个列表

Posted 2023-03-25

【中文标题】如何使用 List.js 更新一个列表

【英文标题】：How to update one list using List.js

【发布时间】：2021-03-12 02:49:18

【问题描述】：

我正在实现 List.js

列表.js https://listjs.com/docs/

我想通过指定 id=1 来“更新”项目。

我想要一个像.myUpdate() 这样的“更新”功能。

但文件似乎只有“删除”和“添加”。

有没有办法“更新”它？

代码https://jsfiddle.net/mabk8gf0/

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.0/list.min.js"></script>

<div id="users">
<ul class="list"></ul>
</div>

<script>
// li html
function getHtml(values)
    let html = `<p>$values.name</p><p>$values.id</p>`;
    if ( values.address )
        html += `<p>$values.address</p>`;
    
    return `<li>$html</li>`;


// create userList object
var userList;
var options = 
    item: function(values)  return getHtml(values)  
;
userList = new List( 'users', options );

// user items
var items = [
        name: 'Jonny',
        id: 2
    ,
    
        name: 'Alice',
        id: 1
    ,
    
        name: 'Martina',
        id: 3
    
];

// add items
userList.add(items); 

// update data
var targetInfo =  id: 1 ;
var updateInfo =  address: 'tokyo' ;

// How to update one item?
/*
    I'm asking for UPDATE like `.myUpdate()` below,
    but I can't do this
*/
// userList.myUpdate( targetInfo, updateInfo );

/*
    Is there only a way to REMOVE and then ADD,
    as shown below?
*/
var updateItem = userList.get( 'id', targetInfo.id )[0]._values;
userList.remove( 'id', targetInfo.id );
$.extend(updateItem, updateInfo);
userList.add(updateItem);
</script>

【新尝试】

当我进一步尝试以下操作时，userList 对象已更新，但 HTML 没有。

/*
    source 
    https://listjs.com/examples/add-get-remove/
*/
var targetInfo =  id: 1 ;
var item = userList.get('id', targetInfo.id)[0];
item.values(
    name   : 'Joshua',
    address: 'tokyo',
);

【参考方案1】：

您可以在此处查看编辑按钮的示例。 在这里，您可以看到编辑行按钮按您的意愿工作。

https://listjs.com/examples/add-get-remove/

【讨论】：

谢谢！例子可以用.values ()更新，但不能用问题中的【新尝试】来更新。你知道为什么吗？

显然，如果我使用带有item: 选项的函数，则该方法不起作用。