如何使用/link外部api在grapejs组件中显示提取的数据

Question

我对grape和backbonejs很陌生。我想做一个模板生成器grapejs提供的默认组件，如标签、图像等，也将具有自定义组件对于今天拥有图像和产品名称的前五名产品，它将从服务器获取最新数据。在这种情况下，我无法确定我应该在哪里进行API调用，以及如何使用提取的结果在组件中显示。我尝试过的代码链接在评论中。

Answer 1

如果将代码移动到道具更改处理程序，则可以根据需要使用API调用中的值，而不是视图的onRender函数。

检查此小更改：https://jsfiddle.net/jvas28/8sb3tn94/1/

const editor = grapesjs.init({
container: '#gjs',
fromElement: 1,
height: '100%',
storageManager: { type: 0 },
});

editor.DomComponents.addType('test-component', {
model: {
defaults: {
testprop: '12345',
url: 'https://jsonplaceholder.typicode.com/posts/1'
},
init() {
console.log('Local hook: model.init', this.attributes.testprop);
fetch(this.attributes.url)
.then(response => response.json())
.then(commits => {
this.set('testprop', 'Test');
console.log(this.attributes.testprop);
});
this.listenTo(this, 'change:testprop', this.handlePropChange);
// Here we can listen global hooks with editor.on('...')
},
updated(property, value, prevValue) {
console.log('Local hook: model.updated',
'property', property, 'value', value, 'prevValue', prevValue);
},
removed() {
console.log('Local hook: model.removed');
},
handlePropChange() {
let prop = this.get('testprop');
// Here inside view it is getting the old value. of "testprop" i.e '12345' but not 
//the new value 
//which is being fetched from server in the init() of model.
let comp1 = '<div>' +
'<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" />' +
'<span title="foo">' + prop + '</span>' +  '</div>';
const component = editor.addComponents(comp1);
return component
}
},
view: {
init() {
console.log('Local hook: view.init');
},

},
});
// A block for the custom component
editor.BlockManager.add('test-component', {
label: 'Test Component',
content: `<div data-gjs-type="test-component"></div>`,
});