I am implementing List.js
List.js https://listjs.com/docs/
I want to "UPDATE" the item by specifying the id=1.
I want an "UPDATE" feature like .myUpdate().
But the document seems to only "REMOVE" and "ADD".
Is there a way to "UPDATE" it?
code 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>
【New attempt】
When I tried the following further, the userList object was updated, but the HTML was not.
/*
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',
});
You can see the example here for edit button. Here you can see the edit row buttons working as you wanted.
https://listjs.com/examples/add-get-remove/