Issue #1674๐ฌ AnsweredOpened December 20, 2018by alialrabi0 reactions
Render block after trait action .
ๅฟซ้่งฃ็ญby artf
Inside the canvas you have Components... not blocks. A block is just a container which creates components when you drag them inside the canvas. Read carefully https://grapesjs.com/docs/modules/Components-js.html and see how you can interpolate component's properties to create dynamic scripts
Read full answer below โQuestion
ไปฃ็ ็ๆฎตTEXT
I have created new block called sidebar that have dynamic updates by trait component ,trait contain checkboxes to dynamic change content by passing parameter to block , block updated but not rendered in editor,How can I render block in editor after click checkbox.
I want to update ${data.cat} in editor
block content in SidebarTool class
export class SidebarTool implements BasicTool {
createTool(data){
return {
id: 'sidebar',
label: '<i class="fab fa-stripe-s fa-3x"></i> <br><br><div>Side Bar</div>',
content: {
tagName: 'sidebarSelect',
components: [
{
type:'sidebarSelect',
tagName: 'div',
script:' var SERVER_PATH="http://ec2-52-8-60-188.us-west-1.compute.amazonaws.com:8080/";\n' +
' $(document).ready(function() {\n' +
' $.ajax({\n' +
' type: "POST",\n' +
' url: "https://ayxpoload9.execute-api.us-east-1.amazonaws.com/v1",\n' +
' contentType: "application/json",\n' +
' success: function(res) {\n' +
' localStorage.setItem("token", res.body);\n' +
` getData([${data.cat}]);\n` +
` console.log([${data.cat}]);\n` +
' console.log($("ul li").length);\n' +
' }\n' +
' });\n' +
' ////////////////////////////////////////////////////\n' +
' function getChildByParent(id){\n' +
' //\n' +
'\n' +
' this.access_token = localStorage.getItem("token");\n' +
' const url = SERVER_PATH+\'learning/api/learningunitmbrByParent/\'+id+\'?access_token=\' + access_token;\n' +
' \n' +
' if(!$("ul-"+id+" li").length){\n' +
' $.ajax({\n' +
' type: "GET",\n' +
' contentType: "application/json",\n' +
' url: url,\n' +
' success: function(msg,textStatus, request) { \n' +
' newDom="";\n' +
' msg.map(res =>{\n' +
' newDom+= "<li>"+res.child.name+"</li>"\n' +
' \n' +
' });\n' +
' if(newDom == ""){\n' +
' $(".card-body-"+id).html("No Content in This Course");\n' +
' }else{\n' +
' $(".card-body-"+id+" ul").html(newDom);\n' +
' }\n' +
' },\n' +
' });\n' +
' }\n' +
' }\n' +
' \n' +
'\n' +
'\n' +
' function getData(filter_data) {\n' +
' \n' +
' column=[\'name\',\'status\',\'rating\']\n' +
' this.access_token = localStorage.getItem("token");\n' +
' const url = SERVER_PATH+\'learning/api/learningunits/filter/DEV?access_token=\' + access_token;\n' +
' \n' +
' if(filter_data == undefined)\n' +
' filter_data=[];\n' +
' $.ajax({\n' +
' type: "POST",\n' +
' contentType: "application/json",\n' +
' url: url,\n' +
' data: JSON.stringify(filter_data),\n' +
' processData: false,\n' +
' success: function(msg,textStatus, request) { \n' +
' msg.map(data =>{\n' +
' newDom= \n' +
' \' <div class="card">\'+\n' +
' \' <div data-target="#collapseOne-\'+data.id+\'" aria-expanded="false" aria-controls="collapseOne-\'+data.id+\'" data-toggle="collapse" data-id="\'+data.id+\'" class="card-header" id="headingOne">\'+\n' +
' \' <h5 class="mb-0">\'+data.name+\'</h5>\'+\n' +
' \' <i class="fa fa-caret-down"></i>\'+\n' +
' \' </div>\'+\n' +
' \' <div id="collapseOne-\'+data.id+\'" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">\'+\n' +
' \' <div class="card-body card-body-\'+data.id+\'">\'+\n' +
' \'<ul class="list-unstyled ul-\'+data.id+\'"></ul>\'\n' +
' \' </div>\'+\n' +
' \' </div>\'+\n' +
' \' </div>\';\n' +
' \n' +
' $(".list-container").append(newDom);\n' +
' });\n' +
' \n' +
'\n' +
' $(".card-header").click(function() {\n' +
' if ($(this).children("i").hasClass("fa-caret-down")) {\n' +
' $(this).children("i")\n' +
' .removeClass("fa-caret-down")\n' +
' .addClass("fa-caret-up");\n' +
'\n' +
' console.log( $(this).attr("data-id"));\n' +
' getChildByParent($(this).attr("data-id"));\n' +
' } else {\n' +
' $(this).children("i")\n' +
' .removeClass("fa-caret-up")\n' +
' .addClass("fa-caret-down");\n' +
' }\n' +
' });\n' +
' \n' +
' },\n' +
' });\n' +
' }\n' +
'\n' +
' });',
content: ' <!DOCTYPE html>\n' +
'<html>\n' +
'\n' +
'\n' +
'<head>\n' +
'\n' +
' <meta http-equiv="Access-Control-Allow-Origin" content="*">\n' +
' <meta name="csrf-token" content="b7c2a345-1b2b-41fd-9871-305523fe2828">\n' +
' <header name="Access-Control-Allow-Origin" value="*" />\n' +
'\n' +
' \n' +
' <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n' +
' <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\n' +
'\n' +
'\n' +
' <style>\n' +
' .card-header {\n' +
' display: -webkit-box;\n' +
' background-color: rgba(0, 0, 0, 0);\n' +
' border-bottom: 0;\n' +
' }\n' +
'\n' +
' .card-header .fa {\n' +
' padding: 1px 8px;\n' +
' -webkit-transition: all 0.5s ease;\n' +
' -moz-transition: all 0.5s ease;\n' +
' -o-transition: all 0.5s ease;\n' +
' transition: all 0.5s ease;\n' +
' }\n' +
' .card-header i:hover {\n' +
' cursor: pointer;\n' +
' }\n' +
'\n' +
' .card-header i{\n' +
' margin-top:10px;\n' +
' }\n' +
'\n' +
' .card-body{\n' +
' transition: all 0.7s ease 0s;\n' +
' padding-top:0px;\n' +
' padding-bottom:0px;\n' +
' }\n' +
'\n' +
' .card{\n' +
' background: #ebebeb;\n' +
' }\n' +
'\n' +
'\n' +
' .card-header h5{\n' +
' bottom: 0px;\n' +
' box-sizing: border-box;\n' +
' color: rgb(51, 51, 51);\n' +
' cursor: pointer;\n' +
' height: 27.6px;\n' +
' left: 0px;\n' +
' position: relative;\n' +
' right: 0px;\n' +
' text-decoration: none solid rgb(51, 51, 51);\n' +
' text-size-adjust: 100%;\n' +
' top: 0px;\n' +
' column-rule-color: rgb(51, 51, 51);\n' +
' perspective-origin: 160.5px 13.8px;\n' +
' transform-origin: 160.5px 13.8px;\n' +
' caret-color: rgb(51, 51, 51);\n' +
' border: 0px none rgb(51, 51, 51);\n' +
' font: normal normal 600 normal 16px / 17.6px "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' margin: 0px 0px 10px;\n' +
' outline: rgb(51, 51, 51) none 0px;\n' +
' padding: 10px 20px 0px 0px;\n' +
' }\n' +
'\n' +
' .card i{\n' +
' color: rgb(119, 119, 119);\n' +
' transition: all 0.7s ease 0s;\n' +
' }\n' +
'\n' +
' ul li{\n' +
' padding-left: 15px;\n' +
' color: rgb(119, 119, 119);\n' +
' }\n' +
' ul li:hover{\n' +
' box-sizing: border-box;\n' +
' color: rgb(119, 119, 119);\n' +
' display: block;\n' +
' /* height: 27.6px; */\n' +
' text-align: left;\n' +
' text-decoration: none solid rgb(119, 119, 119);\n' +
' text-size-adjust: 100%;\n' +
' \n' +
' column-rule-color: rgb(119, 119, 119);\n' +
' perspective-origin: 160.5px 13.8px;\n' +
' transform-origin: 160.5px 13.8px;\n' +
' caret-color: rgb(119, 119, 119);\n' +
' background: rgb(221, 221, 221) none repeat scroll 0% 0% / auto padding-box border-box;\n' +
' border: 0px none rgb(119, 119, 119);\n' +
' /* font: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; */\n' +
' list-style: none outside none;\n' +
' /* margin: 1px 0px 0px; */\n' +
' outline: rgb(119, 119, 119) none 0px;\n' +
' /* padding: 5px 6px; */\n' +
' padding-left: 15px;\n' +
' transition: all 0.7s ease 0s;\n' +
' }\n' +
'\n' +
' ul li:hover:after {\n' +
' box-sizing: border-box;\n' +
' color: rgb(119, 119, 119);\n' +
' text-align: left;\n' +
' text-decoration: none solid rgb(119, 119, 119);\n' +
' text-size-adjust: 100%;\n' +
' column-rule-color: rgb(119, 119, 119);\n' +
' caret-color: rgb(119, 119, 119);\n' +
' border: 0px none rgb(119, 119, 119);\n' +
' font: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' list-style: none outside none;\n' +
' outline: rgb(119, 119, 119) none 0px;\n' +
'}/*#A_1:after*/\n' +
'\n' +
' ul li:hover:before {\n' +
' box-sizing: border-box;\n' +
' color: rgb(119, 119, 119);\n' +
' text-align: left;\n' +
' text-decoration: none solid rgb(119, 119, 119);\n' +
' text-size-adjust: 100%;\n' +
' column-rule-color: rgb(119, 119, 119);\n' +
' caret-color: rgb(119, 119, 119);\n' +
' border: 0px none rgb(119, 119, 119);\n' +
' font: normal normal 400 normal 14px / 18.2px Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;\n' +
' list-style: none outside none;\n' +
' outline: rgb(119, 119, 119) none 0px;\n' +
'}/*#A_1:before*/\n' +
'\n' +
' </style>\n' +
' </head>\n' +
'\n' +
' <body>\n' +
' <script\n' +
' src="https://code.jquery.com/jquery-3.3.1.js"\n' +
' integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="\n' +
' crossorigin="anonymous"\n' +
' ></script>\n' +
'\n' +
' <script\n' +
' src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"\n' +
' integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"\n' +
' crossorigin="anonymous"\n' +
' ></script>\n' +
' <script\n' +
' src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"\n' +
' integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"\n' +
' crossorigin="anonymous"\n' +
' ></script>\n' +
'\n' +
'\n' +
'\n' +
'\n' +
' <div class="accordion list-container" id="accordionExample">\n' +
' </div>\n' +
'\n' +
' </body>\n' +
'</html>\n',
}
]
}
}
}
trait code
domComps.addType('sidebarSelect', {
model: dModel.extend(
{
init() {
for (var i = 0; i < that.listcatogry.length; i++) {
if (that.listcatogry[i].type == 'checkbox') {
this.listenTo(this, 'change:' + that.listcatogry[i].name, this.doStuff);
}
}
console.log(this);
},
doStuff() {
that.selectedCategory = [];
var colmBlock;
this.get('traits').each(function(trait) {
if (trait.attributes.type == 'checkbox' && trait.attributes.value == true) {
that.selectedCategory.push(trait.get('name'));
console.log(that.selectedCategory);
that.editor.BlockManager.get('sidebar').set( that.sideBarTool.createTool({ cat: that.selectedCategory }))
}
});
},
defaults: Object.assign({}, dModel.prototype.defaults, {
traits: this.listcatogry,
}),
},
{
isComponent: function(el) {
if (el.tagName == 'div2') {
return { type: 'input' };
}
},
},
),
view: dView,
});Answers (3)
artfโข December 21, 2018
Inside the canvas you have Components... not blocks. A block is just a container which creates components when you drag them inside the canvas. Read carefully https://grapesjs.com/docs/modules/Components-js.html and see how you can interpolate component's properties to create dynamic scripts
alialrabiโข December 21, 2018
Thanks for replay and for your great tool ,So is it possible to render the component by trait.
artfโข December 21, 2018
Yes, you can listen for trait changes and doing whatever you want
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1683
How to change id/class when new element drop on editor or render element with dynamic ip?
Hello @artf , Hope you are doing well. I have two questions regards dynamic blocks adding, 1) Is it possible to render the block with dynam...
3 answersUpdated December 27, 2019
Issue #1679
How to render component in canvas using trait.
Hi Artf ,Thanks for your great tool,I have created test case for my problem https://js.do/code/271771 I have created custom tool sidebar an...
3 answersUpdated January 2, 2020
Issue #1982
[QUESTIONS] addcomponent after the selected component
how do I make it possible to add new components after the component I selected, at this time I use editor.DomComponents.addComponent (block...
3 answersUpdated May 6, 2020
Issue #1817
Change HTML content while block is render in editor
Hello @artf I have one block into block manager like As per above script inside the block, i want to add dynamic HTML content while this bl...
3 answersUpdated February 22, 2020
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.