Issue #2030Opened May 23, 2019by ohmyvander0 reactions

[Question]Is it possible to customize a block which load data from database

Question

For example, I want to create a complex custom navbar block. It has several first level navigations, and each of one also has several second level navigations. The data of navbar is loaded from database. And when I drag it to the canvas, I can modify properties in trait to change the data navbar loaded. Also, when I export template, I want the code is just html, not js contains ajax request, something like server side rendering.

Is it possible?

Answers (1)

artfMay 29, 20190 reactions

Sure, but in that case, I'd suggest you create a custom component.

Here an example/pseudo-code of triggering an async function for changing the component content

editor.DomComponents.addType('my-custom-component', {
	model: {
		defaults: {
			endpoint: 'http://A', // some prop for the trait
			traits: [
				{
					type: 'select',
					name: 'endpoint',
					changeProp: 1,
					options: [ 'http://A', 'http://B' ],
				}
			]
		},
		init() {
			this.listenTo(this, 'change:endpoint', this.refreshContent);
			this.refreshContent();
		},
		async refreshContent() {
			const { endpoint } = this.attributes;
			const response = await fetch(endpoint);
			...
			let result = '';
			// ... Build the HTML result from the async response
			...			
			this.components(result);
		}
	}
});

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.