Javascript 自定义架构字段类型能否在呈现后运行代码?

Javascript 自定义架构字段类型能否在呈现后运行代码?,javascript,apostrophe-cms,Javascript,Apostrophe Cms,我正在尝试向撇号CMS项目添加新的模式类型。实际上,我正在尝试使用Fabric.js添加一个图像设计器,作为片段编辑器模式的一部分。我有一个片段类型,它将Fabric.js生成的JSON存储为字段,并希望编辑器在编辑片段时显示为字段或字段的位置 我有这部分工作遵循指南在。然而,我遇到了一个问题。addFieldType的populate方法似乎在页面上呈现实际字段集之前被调用。这通常是可以的,因为大多数字段在渲染时都应用了基本的if-any逻辑,但在本例中,Fabric.js似乎要求画布元素出现

我正在尝试向撇号CMS项目添加新的模式类型。实际上,我正在尝试使用Fabric.js添加一个图像设计器,作为片段编辑器模式的一部分。我有一个片段类型,它将Fabric.js生成的JSON存储为字段,并希望编辑器在编辑片段时显示为字段或字段的位置

我有这部分工作遵循指南在。然而,我遇到了一个问题。addFieldType的populate方法似乎在页面上呈现实际字段集之前被调用。这通常是可以的,因为大多数字段在渲染时都应用了基本的if-any逻辑,但在本例中,Fabric.js似乎要求画布元素出现在页面上,否则它无法正确连接到它,并且无法加载

我在第80行中注意到,这似乎暗示有一种方法可以覆盖自定义字段类型中的afterPopulate。我似乎无法实现这一点——我尝试过添加它以类似于下面所示的填充,但它从未被调用,这在查看同一文件的第44行时是有意义的,因为在fieldType上,在该点上唯一被调用的是填充

是否有一种方法可以从自定义字段类型重写afterPopulate,或者是否有其他方法可以处理此问题?现在我基本上在初始化结构之前在populate中添加了500毫秒的超时,这确实有效,但看起来非常粗糙。以下是我迄今为止添加的代码:

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);
  }
}
})

self.afterPopulate属于撇号模式模块,因此需要在项目级lib/modules/撇号模式/public/js/user.js文件中覆盖它


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

我最初也不这么认为,但当我通过字段JS进行调试并在填充过程中进行检查时,我的$el param引用的元素不存在。我试图使用jQuery对该元素的链接并通过当前页面源进行搜索,但它在这两个页面中都不存在。我可能对我的场做了一些错误或不寻常的事情,所以听到该场应该在该点进行渲染是有帮助的。