Issue #528Opened November 15, 2017by krunal0390 reactions

Model and Component sample code and issue

Question

@artf Sorry for creating another issue but I tried below code also I have created codepen for same.

Codepen

and still it only return empty div via editor.getHtml(),

capture

I can see html updated in canvas but not on model.

capture

Also updateSrc() and updateh2Content() function has var linkModel = this.get("components").at(0); undefined.

capture

If you can please do not close issue and try to explain or point to correct sample where I can refer to?

`//add custom component

comps.addType("custom-comp1", {

// Define the Model
model: defaultModel.extend({
    // Extend default properties
    defaults: Object.assign({}, defaultModel.prototype.defaults, {
        droppable: false,
        type: "custom-comp1",
        tagName: "div",
        void: 0,
        src: "http://placehold.it/260x195",
        h2Content: "Sample H2",
        attributes: {
            "data-gjs-type": "custom-comp1"
        },
        traits: [{
            type: "text",
            label: "Image Source",
            name: "src",
            placeholder: "eg. https://www.google.com",
            changeProp: 1
Code SnippetTEXT
}, {
                type: "text",
                label: "H2 Content",
                name: "h2Content",
                placeholder: "Sample H2",
                changeProp: 1
            }]
        }),
        initialize(o) {
            defaultModel.prototype.initialize.apply(this, arguments);

            this.listenTo(this, "change:src", this.updateSrc);
            this.listenTo(this, "change:h2Content", this.updateh2Content);
        },
        updateSrc() {
            var linkModel = this.get("components").at(0);
            var src = this.get("src");
            if (linkModel) {
                linkModel.href = src;
            }
        },
        updateh2Content() {
            var linkModel = this.get("components").at(0);
            if (linkModel) {
                var h2Model = linkModel.get("components").at(0);
                var h2Content = this.get("h2Content");
                if (h2Content) h2Model.content = h2Content;
            }
        },
        updateAll() {
            this.updateSrc();
            this.updateh2Content();
        }
    }, {
        isComponent(el) {
            if (el.className === "custom-comp1") {
                return {
                    type: "custom-comp1"
                };
            }
        }
    }),

    // Define the View
    view: defaultView.extend({
        initialize(o) {
            defaultView.prototype.initialize.apply(this, arguments);
            this.listenTo(this.model, "change:src", this.updateSrc);
            this.listenTo(this.model, "change:h2Content", this.h2Content);
        },

        h2Content() {
            $(this.el)
                .find("h2")
                .html(this.model.get("h2Content"));
        },
        updateSrc() {
            $(this.el)
                .find("a")
                .attr("href", this.model.get("src"));
        },

        render(...args) {
            this.updateAttributes();
            this.updateClasses();
            var tempTemplate =
                "<h2>" +
                this.model.get("h2Content") +
                "</h2><p>" +
                this.model.get("h2Content") +
                "</p>";
            var template =
                "<a onclick='event.preventDefault()' href=" +
                this.model.get("src") +
                ">" +
                tempTemplate +
                "</a>";
            this.el.className = "custom-comp1";
            this.el.innerHTML = template;
            this.model.updateAll();
            return this;
        }
    })
});`

Answers (1)

lock[bot]September 18, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.