Issue #528💬 AnsweredOpened November 15, 2017by krunal0390 reactions

Model and Component sample code and issue

快速解答by lock[bot]

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.

Read full answer below ↓

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
代码片段TEXT
}, {
                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, 2019

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.