#TodoMVC #Repeater #DataBinding #DataAPI
Demonstrates
Links for this example
View the “Live” example in a browser page
Open the Example template in the Wix Editor
About this example
This is the Wix Code version of the TodoMVC project . Using input components in a Repeater, the Data binding and Data API implementations (on separate pages) are functionally the same and demonstrate different techniques for the developer.
Hey Yisrael! So good and a simple yet super powerful sample how to now use input elements in repeaters! Thank you so much!
What do we use Await and Async for
Await and Async is used to wait for an action or function to be completed until it moves to the next action / function. here is good page on the matter: Async/await
@andreas-kviby Man you’re fast. And right in the middle of my putting together a response.
Here’s the section on async/await in the Wix Code article on Working With Promises .
Its so great example. i struggled with save and refresh problem for weeks. It didnt want to refresh repeaters after save. Thanks to await async it works now. Sooooooooooooooooooooooooo Greaaaaaaaaaaat. Those editor exapmles are powerfull becasue i can see everything connected (code, layout, collection) . For “code changer” not developer like me its time saving. Thanks a lot for for such examples
Could You explain what exacly means _ in this code. I understand you find id of item’s repeater but where i can find more about this “_” how to use it?
data.find(_ => _._id === itemId);
export async function checkbox1_change(event) {
let $item = $w.at(event.context);
let itemId = event.context.itemId;
let newValue = $item(‘#checkbox1’).checked;
let item = $w(‘#repeater1’).data.find(_ => _._id === itemId);
item.completed = newValue;
await saveItem(item);
Sorry it took so long to get back to you on this…
Typically, the underscore character _ is used as a don’t care variable. That is, it’s just a way to say “here’s where a variable goes, but we’re not going to use it”.
However …
In the code you referred to, _ is just being used as a variable. The underscore _ and the dollar sign $ can both be used as variables. It’s just a matter of style.
thank a lot fo r explaing and of course for Your work, Chris
Is this content going to stay on the page from session to session - and is this because it’s tied to the database?
If I already have code written with HTML, CSS and JavaScript…is there any other code I could use to populate the to do list on the page without connecting to the database? I’m just not understanding how to conncect a separate form I’ve created to a database on Wix.
The only way to use HTML/CSS/Javascript code on a Wix site, is to use an HtmlComponent. If you want to connect to a database collection, you will need to send messages from the code in the HtmlComponent to the page. Code on the page can then get the data from the messages and save it in a collection.
Using HTML/CSS/Javascript code on a Wix site is not recommended. Wix supplies all of the tools that you need to create your own interactive forms, including: screen components, database collections, and Corvid (which allows you to add functionallity).
The TodoList data is saved in a database collection.
The TextInput element does not appear to be in the repeater. Am I missing something? Thanks.
What is the difference between Data Binding and Data API? Is one better than the other? Lastly, can we have only one than having both?
The Live example only shows the items I have entered (no items that have been added by any other users), but when I publish the Example template the items I enter are shown when I open the published page in another browser and on another device. How did you get the Live example to do this? I’m setting up a calculator and would like each user to only see the data they have entered.
is there a way to add a delete button for a specific to do list item? Like if the user wants to delete a specific item can there be an “X” when you hover over a line and the item be deleted from list and database?
See this example:
Input Components in Repeater
Use input components in a repeater, and apply inline and global actions to repeater content.
Brillliant! Thanks so much to Yisrael for such a helpful example - works great!
