首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >自定义架构字段类型可以在呈现后运行代码吗?

自定义架构字段类型可以在呈现后运行代码吗?
EN

Stack Overflow用户
提问于 2021-03-27 08:47:51
回答 1查看 36关注 0票数 0

我试图在我的Apostrophe项目中添加一个新的模式类型。实际上,我试图使用Fabric.js添加一个图像设计器,作为部件编辑器模式的一部分。我有一个片段类型,它将Fabric.js生成的JSON存储为一个字段,并希望编辑器在编辑片段本身时代替字段(或字段)。

我已经完成了部分工作(遵循https://docs.apostrophecms.org/howtos/custom-schema-field-types.html的指南)。然而,我遇到了一个问题。在页面上呈现实际的字段集之前,似乎会调用addFieldType的填充方法。这通常是可以的,因为大多数字段都有在呈现时应用于它们的基本逻辑(如果有的话),但是在这种情况下,Fabric.js似乎要求画布元素出现在页面上,否则它无法正确地连接到它,并且无法加载。

我在第80行的https://github.com/apostrophecms/apostrophe/blob/b22af9320169bf3af26cd17642373ae1e331a990/lib/modules/apostrophe-schemas/public/js/user.js中注意到,这似乎意味着有一种方法可以在自定义字段类型中覆盖afterPopulate。我似乎无法让它起作用--我尝试过类似地将它添加到填充(见下面),但它从未被调用(这在同一文件的第44行中是有意义的,因为在fieldType上被调用的唯一东西就是填充)。

是否有一种从自定义字段类型重写afterPopulate的方法,或者是否有其他方法来处理这个问题?现在,我基本上是在初始化Fabric之前在填充中添加了一个500‘m的超时,这是可行的,但是看起来非常麻烦。下面是我到目前为止添加的代码:

代码语言:javascript
复制
apos.define('fabric-editor', {

afterConstruct: function(self) {
  self.addFieldType();
},

construct: function(self, options) {

  self.addFieldType = function() {
    apos.schemas.addFieldType({
      name: 'fabric-editor',
      afterPopulate: self.afterPopulate,
      populate: self.populate,
      convert: self.convert
    });
  };

  self.afterPopulate = function($el, schema, object, callback) {
    callback();
  }

  self.populate = function(object, name, $field, $el, field, callback) {
    var $fieldset = apos.schemas.findFieldset($el, name);
    callback();
    setTimeout(function () {
        var canvas = $fieldset.find('#fabric-canvas');
        if (canvas.length > 0) {
            self.fabricCanvas = new fabric.Canvas(canvas[0]);
        }

        fabric.Object.prototype.transparentCorners = false;
        fabric.Object.prototype.cornerColor = 'blue';
        fabric.Object.prototype.cornerStyle = 'circle';
        self.addRectangle();
    }, 500)
  };

  self.addRectangle = function (ev) {
    var rect = new fabric.Rect({
        left: 10,
        top: 10,
        fill: 'red',
        width: 100,
        height: 100
    });

    self.fabricCanvas.add(rect).renderAll().setActiveObject(rect);
  }
}

});

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-31 21:38:31

self.afterPopulate属于apostrophe-schemas模块,因此您需要在项目级别的lib/modules/apostrophe-schemas/public/js/user.js文件中覆盖它。

但是,我不认为字段的populate函数是在字段出现在页面上之前调用的,因为它将表单元素作为参数传递进来。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66829505

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档