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.
and still it only return empty div via editor.getHtml(),
I can see html updated in canvas but not on model.
Also updateSrc() and updateh2Content() function has var linkModel = this.get("components").at(0); undefined.
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
}, {
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)
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.
Issue #513
Model and returned html issue
I have below code to create custom component and wants to retrieve updated html via editor.html() but return wrong html, I am sure I am mis...
Issue #527
Model and HTML return issue
#522 @artf I tried as you said but still no luck, I do not want to waste your time but it would be very useful if you can please create sma...
Issue #459
Error when including a custom component inside another block
Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can...
Issue #1208
Create minimalist Panel left sidebar III
hello @artf , thanks to you for the comment on #1188, i see in the code https://codepen.io/artf/full/MQpZPj/ uses the appendTo property to...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.