如何将UI元素传递给Marionette ItemView中的新织物画布

Question

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

我有错误

Cannot create property 'style' on string 'constructor'

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

Cannot set property 'userSelect' of undefined

ItemView控件

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负责调用bindUIElements并且可以直接在ui hash中使用它们 。

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

在Marionette v3及更高版本中

注意：从Marionette v3.x开始， Marionette.View替换了Marionette.LayoutView和Marionette.ItemView 。

使用getUI视图函数获取UI元素的jQuery对象。

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