Return span randomly in custom component

Question

I have custom component and on trait change wanted to updated html but randomly it returned span/textnode in trait change function insted of html element. Below is html generated by component and on title change want to updated h4 element.

updateTitle : function updateTitle() {
                    var title = this.get('title');
                    var linkModel = this.get("components").at(0);
                    if (linkModel) {
                        var titleContainer = linkModel.get("components").at(3);
                        if (titleContainer) {
                            var h4 = titleContainer.get("components").at(0);
                            if (h4) {
                                h4.set("content", title);
                            }
                        }
                        linkModel.attributes.attributes["aria-label"] = title;
                        linkModel.attributes.attributes["title"] = title;
                    }
                    this.set("data-title", title);
                    if (this.get('isCreatePage') && this.changed && this.changed.title) {
                        this.set('isPageCreated', false);
                        this.set('bespokePageUrl', '');
                        this.updateIsCreatePage();
                    }
                }

linkModel.get("components").at(0) returns "div.programme-description" correctly
linkModel.get("components").at(1) returns "span" not sure from where it is coming
linkModel.get("components").at(2) returns "span" not sure from where it is coming
linkModel.get("components").at(3) returns "img.programme-content-image" correctly
linkModel.get("components").at(4) return "div.programme-play-button-hidden" correctly
linkModel.get("components").at(5) return "div.programme-title" correctly

here not sure from where linkModel.get("components").at(1) & linkModel.get("components").at(2) "span" are returned and they are returned randomly so not sure what is happing and due to it h4 title is not updated as index of item changes.

Answers (3)

artf• June 6, 20180 reactions

Well from what you've posted I can't tell what is happening but definitely, there is nothing generated randomly, just go deeper with the debug. BTW you can solve this easier by using find(query) method:

var title = this.get('title');
...
var h4 = this.find('h4')[0]; // returns an array of models
h4 && h4.set("content", title);
...

krunal039• June 7, 20180 reactions

@artf I tried to debug but no luck as it is happening on some pages and not on all pages. also

this.find is undefined

artf• June 14, 20180 reactions

Just update grapesjs

Return span randomly in custom component

Question

Answers (3)

Related Questions and Answers

QUESTIONS : Find element in Model

Model and returned html issue

[Question] Set traits value from html on component load

[QUESTION] render() works on the first time but not on subsequent calls

Paid Plugins That Match This Issue

Browse Plugin Categories