我是新的葡萄和backbonejs。我想使一个模板建设者除了有默认组件提供的葡萄像标签,图像等也将有自定义组件的前5名产品今天有一个图像和产品名称,它将得到最新的数据从服务器。在这种情况下,我不知道我应该在哪里调用API,以及如何使用获取的结果在组件中显示。链接到我已经尝试过的代码在注解中。
bvpmtnay1#
如果将代码移到属性更改处理程序中,而不是视图的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', 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>`, });
1条答案
按热度按时间bvpmtnay1#
如果将代码移到属性更改处理程序中,而不是视图的onRender函数中,您将能够根据需要使用API调用中的值。
检查此小更改:https://jsfiddle.net/jvas28/8sb3tn94/1/