Child View not Displaying

[aldisa]

I have a custom view in which I am trying to create a child view. For a reason that I cannot figure out (everything seems to be executing properly), the template contents of the child view are not displaying.

Here is my code.

Parent view: my-module:views/parent

define('my-module:views/parent', ['view'], (View) => {

    return class extends View {

        template = 'my-module:parent';

        setup = () => {

            this.wait(

                Espo.Ajax.getRequest('my-module/my-entity/' + this.options.id)

                .then(result => {
                    if (result.found) {

                        this.data = result;

                        this.createView('child', 'my-module:views/child', {
                            selector: '#child-panel',
                            data: result
                        });

                    } else {
                        console.log(result);
                        Espo.Ui.error(`Error: ${result.error}`);
                    }
                })

                .catch(xhr => {
                    Espo.Ui.error('Error in XHR Fetch');
                }),
            );

        };

        data = () => this.data;

}); 

Parent Template

<div class="record">

    <div class="left">

        <div class="panel panel-info headered">

            <div class="panel-heading">
                <div class="panel-title">My Entity</div>
            </div>

            <div class="panel-body panel-body-form">

                <div class="row">

                <!-- display data templating here -->

                </div>

            </div>
        </div>

    </div>

    <div class="side">

        <div id="child-panel"></div>

    </div>

</div>

Parent view: my-module:views/child

define('my-module:views/child', ['view'], (View) => {

    return class extends View {

        templateContent = '<h1>Hello Child View</h1>';

        setup = () => {

            this.data = this.options.data;

        };

        data = () => this.data;

    }

}); 

In the Chrome Developer Console, I am able to confirm that the child view goes through the rendering process, the data param is transferred and captured properly, but the `templateContent` html does not display in the rendered html.

What am I doing wrong?

[yuri]

<div id="child-panel"></div>

=>

<div id="child-panel">{{{child}}}</div>

[yuri]

W/o it, you should have explicitly rendered the child view.

[aldisa]

That works, thanks!!

I tried explicitly rendering like this in the parent view's setup method:

                        this.createView('child', 'my-module:views/child', {
                            selector: '#child-panel',
                            data: result
                        }, (view) => view.render()); 

I get this error in the console: Could not set element '#main #child-panel'.

I even tried to put the render command in `afterRender` in the parent view, and in the setup and afterRender of the child view. Same error. I tried to trace back to why the element was not being selected, but from what I was seeing, the selector of the element was being passed properly. My guess is that my attempts to render were occuring before the parent view DOM had rendered so the element was not being found, and I could not figure out how to time the render of the child view after parent view DOM is loaded.

[yuri]

It should render in afterRender method. We use it quite often.

[yuri]

C̶o̶u̶l̶d̶ b̶e̶ t̶h̶a̶t̶ t̶h̶i̶s̶.c̶r̶e̶a̶t̶e̶V̶i̶e̶w̶ i̶s̶ c̶a̶l̶l̶e̶d̶ a̶f̶t̶e̶r̶ v̶i̶e̶w̶ i̶s̶ p̶r̶e̶p̶a̶r̶e̶d̶ (̶a̶l̶l̶ w̶a̶i̶t̶ p̶r̶o̶m̶i̶s̶e̶s̶ r̶e̶s̶o̶l̶v̶e̶d̶)̶ a̶n̶d̶ r̶a̶c̶e̶ c̶o̶n̶d̶i̶t̶i̶o̶n̶ h̶a̶p̶p̶e̶n̶e̶d̶. N̶o̶t̶ s̶u̶r̶e̶ t̶h̶o̶u̶g̶h̶.

[yuri]

Should not be the case, as we have a similar usage: https://github.com/espocrm/espocrm/b...formula.js#L81

[aldisa]

I tried to replicate that I could not render child in the `afterRender` method of parent.

It is working as you indicated. I cannot figure out or replicate what I was doing wrong when I tried it before.

It works perfectly fine like this:

In the setup method of parent:

this.createView('child', 'my-module:views/child', {
    selector: '#child-panel'
}); 

In the parent view template file:

<div id="child-panel"></div>

In the afterRender method of the parent view:

afterRender = () => {
    const childView = this.getView('child');
    childView.render();
} 

yuri, I apologize for the incorrect information and any confusion I may have caused.