Data Binding on Label and Avoid Multiple HTTP Requests in Webix Jet

Webix JS
#1

Hi, I am trying to develop a new app using Webix and Webix Jet, but I encountered some questions in coding.

What I would like to do is:

  1. A page which will make 1 API call to get the data used in that page.
  2. Use MVVM pattern, so that changes made to the bound data will be reflected to the UI.

I made the following code
https://webix.com/snippet/6a90d0b2

It work perfectly now, but what I am not satisfied is that:

  1. Labels are set after data loading, and is not bound to any view model. It seems that I can use webix.DataRecord but I cannot find an example on how to bind a property in a webix.DataRecord.
  2. To avoid making multiple HTTP requests to retrieve the same set of data, webix.ajax() is used. In Webix Jet, each file in “sources/models” folder should represent a type of data with the respective API endpoint as data source. In our single API however, is returning multiple types of data. I am not sure how to properly implement this in Webix Jet in an organized way because all the examples in the document at Page not found - Webix Jet are returning 1 type of data per API, and we are unable to use Webix Remote because our backend is written in Java.

I hope somebody can give me some advises or point me to the right documentation so that I can further study on the implementation approach. Thanks.

#2

(1)

You can use DataRecord but in case of webix jet it will be an overkill

Here is code which uses the DataRecord
https://webix.com/snippet/beee5ddc
And here is code which works with raw values
https://webix.com/snippet/6ce61f16

In case of webix jet, you can define in view config that it needs to wait while data is not resolved and access the value from the model object. At any moment of time, you can instruct view to repaint self, and it will do so with latest values from the model.

#3

(2)

The model object stores all functionality related to some data entity. Normally it includes the code for data loading as well, but if necessary a shared data transport can be used.


//models/griddata.js

import {sharedData} from models/shared.js
const gridData= new webix.DataCollection();
gridData.parse(sharedData("grid"));

export gridData;

//models/shareddata.js

var data = webix.ajax("some.json").then(a => a.json());

export function sharedData(name){
    return data.then(a => {
            switch name:
                case "grid":
                   return a.grid;
                default:
                   return [];
    });
}

Here you have a separate file sharedata which communicates with shared data feed and can provide different chunks for different consumers. In same time each entity has its own model which stores data and all related API and just uses shareddata for data loading.

#4

Great, thanks. It seems that it is a way to go when structure the code like this :smile: