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

【问题标题】：How to update one list using List.js如何使用 List.js 更新一个列表
【发布时间】：2021-03-12 02:49:18
【问题描述】：

我正在实现 List.js

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

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

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

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

有没有办法“更新”它？

<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',
});

【问题讨论】：

标签： javascript html jquery list.js

【解决方案1】：

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

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

【讨论】：

谢谢！例子可以用.values ()更新，但不能用问题中的【新尝试】来更新。你知道为什么吗？
显然，如果我使用带有item: 选项的函数，则该方法不起作用。