如何使用/链接外部api在grapejs组件中显示获取的数据

如何解决如何使用/链接外部api在grapejs组件中显示获取的数据

我是葡萄和骨干js的新手。我想制作一个模板构建器，除了有 由grapejs 提供的默认组件，如标签、图像等也将具有自定义组件 例如，今天排名前 5 的产品具有图像和产品名称，它将从服务器获取最新数据。在这种情况下，我无法弄清楚应该在哪里进行 API 调用以及如何使用获取的结果在组件中显示。链接到我尝试过的代码在评论中。

解决方法

如果您将代码移动到 prop 更改处理程序，而不是视图的 onRender 函数，您将能够根据需要使用 API 调用中的值。

检查这个小变化： 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','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>`,});