如何将 UI 元素传递到 Marionette ItemView 中的新结构 canvas

Question

我想使用 Fabric.js 和 Marionette.js v2.4.7.

我有错误

Cannot create property 'style' on string 'constructor'

我正在尝试使用 this.ui.canva 但出现错误

Cannot set property 'userSelect' of undefined

项目视图

define([
    'app',
    'marionette',
    'backbone',
    'underscore',
    'pace',
    'text!templates/constructor/index.ejs',
    'fabric'
], function (App, Marionette, Backbone, _, pace, constructorTmpl, fabric) {
    'use strict';

    return Marionette.ItemView.extend({
        template: _.template(constructorTmpl),
        ui: {
            canva: '#constructor'
        },
        onRender: function () {
            var canvas = new fabric.Canvas('constructor');
        }
    });
});

index.ejs

<canvas id="constructor" width="300" height="300"></canvas>

Answer 1

由于视图的元素还不在 DOM 中，fabric 无法全局找到 ID 为 constructor.

的元素

但是该元素已经存在于视图中的内存中，您可以使用它。 fabric.Canvas 可以采用 DOM 元素而不是字符串。

在 v3 之前的 Marionette 版本中，ItemView takes care of calling bindUIElements and they are made available directly in the ui hash.

onRender: function () {
    var canvas = new fabric.Canvas(this.ui.canva[0]);
}

In Marionette v3 and up

Note: From Marionette v3.x, Marionette.View replaces Marionette.LayoutView and Marionette.ItemView.

使用getUI view function获取UI元素的jQuery对象。

onRender: function () {
    var canvas = new fabric.Canvas(this.getUI('canva')[0]);
}

如何将 UI 元素传递到 Marionette ItemView 中的新结构 canvas

How to pass a UI element to a new fabric canvas within a Marionette ItemView

javascript

backbone.js

fabricjs

marionette

项目视图

index.ejs