How to bind to form inside a popup

I’m trying to bind a datatable with a form inside of a popup window that’s rendered as a subview. I can’t seem to figure out how to get a pointer to the actual form inside the popup window.

So, I have a datatable defined, along with a subview for the popup. The form is inside the popup:

import {JetView} from "webix-jet";
import {data} from "models/records";
import {popup} from "views/popup";

export default class DataView extends JetView {
    config() {
        var datatable = { view: "datatable", autoConfig: true };
	var button = { view:"button", value:"Show Window 2", click:() => this.win.showWindow() };
	return {
		cols:[{
			rows:[
				datatable,
				button
			]},
		{ $subview:true, name:"popup", popup:true }
		]
	};

    }
    ready() {
        var list = this.getRoot().queryView({view:"datatable"});
        //this is where I'm having trouble. This next line doesn't work.
        this.getSubView("popup").queryView({view:"form"}).bindWith(list);
    }
    init(view) {
        view.parse(data);
    }
};

The form inside the popup has this method defined:

	bindWith(list) {
		this.getRoot().bind(list);
	}

Anyone know how to correctly get the pointer to the form, so I can call the bindWith method?

Thanks, Dan

Hello @dan65h,

Anyone know how to correctly get the pointer to the form, so I can call the bindWith method?

Firstly, I would like to point out that the getSubView() method is a method used within Jet views, not Webix views. Take a closer look at line 204 - you are calling the getSubView() method as you refer to the Webix view inside the Jet view you’ve gotten by using the getRoot() method. This will obviously not work, since none of the Webix views possess the following method.

In general, we do not recommend using the standard bind() method when working with Webix Jet. This is mostly to do with the way the components are laid out within the app and the fact that you should not be using global ids when working with Webix Jet. The use of global ids greatly limits the reusability of the components and is generally a bad practice. The use of global ids is justified in rare cases, but you should be using local ids wherever possible. Local ids are better to use than global because they isolate ids inside the current Jet view. Because the local ids are isolated within their own Jet views, the use of bind() is greatly hindered, meaning you will have to manually set the values within the “bound” component (this is essentially what bind() does - it simply calls the setValues() method of the form with the necessary data).

Continuing on this point, you can modify the custom showWindow() method within the WinEditFilm view to include the id of the selected datatable item. This essentially enables us to work with the data item within the scope of the form, removing any need for the bind() method. One more important note here: you should be using Data/TreeCollections when working with data in Webix Jet. The use of collections will greatly simplify the process of handling data across multiple components. By referring to the DataCollection we can pass in the data inside the form, we can also use the data from the form to add/update items inside the collection.

All in all, the corrected example will look something like this: Code Snippet.