fabric.js ошибка в рельсах

Question

Я включил fabric.js (папка dist) в моих рельсах 5 приложений - vendor/assets/javascripts.

У меня есть HTML элемент холста в моем файле представления - view.html.erb

<div class="col-sm-6"> 
<canvas id="canvas" width="300" height="200" style="border:1px solid #000000"> 
</canvas> 
</div> 

Я тогда доступ к выше холста в файла JavaScript в assets/javascripts/event.js.

var canvas = new fabric.Canvas('can'); 
var circle = new fabric.Circle({ 
    radius: 20, fill: 'green', left: 100, top: 100 
}); 
canvas.add(circle); 

`` `

Я получаю ниже ошибки, когда я перейти на страницу,

fabric.self-85644f2….js?body=1:6519 Uncaught TypeError: Cannot create property 'style' on string 'can' at klass._createCanvasElement (fabric.self-85644f2….js?body=1:6519) at klass._createLowerCanvas (fabric.self-85644f2….js?body=1:6559) at klass._initStatic (fabric.self-85644f2….js?body=1:6249) at klass.initialize (fabric.self-85644f2….js?body=1:8496) at new klass (fabric.self-85644f2….js?body=1:1944) at event.self-e4cb5e2….js?body=1:3

Вот мой application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require fabric 
//= require_tree . 

Update

Итак, когда код холста обернут в обратном вызове DOM, я вижу, что теперь отображается холст. Но я до сих пор не знаю, как правильно инициализировать ткань. Правильный способ подождать, пока DOM загрузится, а затем запустите код, связанный с материалом.

По-видимому, это способ дождаться готовности DOM - http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks. Однако добавьте этот код оболочки во все файлы javascript, где я могу получить доступ к холсту?

$(document).on('turbolinks:load', function() { 
    var canvas = new fabric.Canvas('can'); 
    var circle = new fabric.Circle({ 
     radius: 20, fill: 'green', left: 50, top: 50 
    }); 
    canvas.add(circle); 
}); 

Answer 1

Отредактировано с правильным ответом.

Часть 1

документа наряду с turbolinks должен быть загружен, прежде чем ткань инициализируется.

$(document).on('turbolinks:load', function() { 
    var canvas = new fabric.Canvas('can'); 
    var circle = new fabric.Circle({ 
     radius: 20, fill: 'green', left: 50, top: 50 
    }); 
    canvas.add(circle); 
}); 

Часть 2

Вы можете создать многоразовую функцию как этот

в приложение/активы/JavaScripts/application.js

var canvas = $(document).on('turbolinks:load', function() { 
     new fabric.Canvas('can'); 
    }); 

Использование переменной холст можно назвать когда вы хотите. Как ниже

var circle = canvas.Circle({ 
    radius: 20, fill: 'green', left: 50, top: 50 
}); 
canvas.add(circle);