On previous steps you've done a good job.
Now it's time to learn how to work with data stored in the database and how to save all CRUD (create, read, update, delete) operations back to the database.
The tasks for server-side are as follows:
You can load the data to the list from your server-side script. Set the path to the script in the url property in the list configuration:
{
view: "list", id: "mylist",
template: "#title# - #year#",
select: true,
url: "../server/films"
}
If you want all client-side changes to be saved to the database, you can set the path to your server-side script in the save property:
{
view:"list", id: "mylist",
template:"#title# - #year#",
select: true,
url:"../server/films",
save:"../server/films"
}
Webix.DataProcessor is responsible for server-side integration and handles all the CRUD operations.
DataProcessor is initialized implicitly if you set the save property. It can also be initialized explicitly for the component you wouldd like to perform server work with:
var dp = new webix.DataProcessor({
master: $$("mylist"), // specifies the desired component
url: "../server/films" // specifies the server API endpoint
});
Very often DataProcessor gets the same url that is specified as the component data source. At the same time, it can be your own piece of code if you want your own / custom logic.
DataProcessor will automatically "translate" all your actions to the server: when you add a record to the list, the new record will appear in the database table, etc.
Server side Integration is described in detail in the related article of documentation.
At last, let's make a step up and simplify form update. In the previous step, you used the "onAfterSelect" event to transmit list data into the form and the "save_row" function to push the edited data back to list.
At the same time, Webix library has powerful Binding API to enable data synchronization between components. Bind() function is used to make one component a data source for another one on selection basis.
The updateItem() function is no longer needed as well, since from now on you apply the save() method to the form to push changes back to the list and the database.
webix.ui({
view: "toolbar",
cols: [
{...},
{
view: "button",
value: "Save",
width: 100,
click: function(){
$$('myform').save();
}
}
] // the new function for the button
});
$$("myform").bind($$("mylist")); //component binding
Addition and removal of items goes the same way as it was on previous step.
Related sample: Creating Basic App: Step 3
Related Articles:
Back to top