Is it possible to combine kinetic.js and backbone.js?

Question

I want to code an app that simply puts a rectangle on the screen. But I need to combine kinetic.js and backbone.js for this and i am not sure it can be done. Kinetic code is: ``` document.getElementById('rect').addEventListener('click', function() { rect = new Kinetic.Rect({ x: 239, y: 75, width: 100, height: 50, fill: 'green', stroke: 'black', strokeWidth: 4, offset: [50,25], draggable: true, }); ``` And backbone code ``` $(function() { var Shape = Backbone.Model.extend({ defaults: { x:50, y:50, width:150, height:150, color:'gray' }, setTopLeft: function(x,y) { this.set({ x:x, y:y }); }, setDim: function(w,h) { this.set({ width:w, height:h }); }, isCircle: function() { return !!this.get('circle'); } }); ``` *I added .html file these paths ```

Accepted Answer

Yes this is definitely possible. I would just create a model that stores the data that you will be using in your shape, use a view to render a span tag with click me, attach an event listener to the span and then output the rectangle when the user clicks.

```
var ShapeModel = Backbone.Model.extend({});
    var rectangle = new ShapeModel({
        x: 10,
        y: 10,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        offset: [0, 0],
        draggable: true,
    });
    var RectangleView = Backbone.View.extend({
        tagName: 'span',
        initialize: function (options) {
            model: options.model;
            el: options.el;
        },
        events: {
            'click': 'spanClicked'
        },
        render: function () {
            this.$el.text('click me');
        },
        spanClicked: function () {
            var stage = new Kinetic.Stage({
                container: this.el,
                width: 200,
                height: 200                    
            });
            var layer = new Kinetic.Layer();
            var rect = new Kinetic.Rect(this.model.toJSON());
            layer.add(rect);
            stage.add(layer);
        }
    });
    var rectangleView = new RectangleView({ el: '#shapetest', model: rectangle });
    rectangleView.render();
```

I would upgrade to the latest version of Backbone and Underscore too.

Also, thanks for pointing out Kinetic. Hopefully it has support for drawing on the canvas on a mobile device.

Is it possible to combine kinetic.js and backbone.js?

Solution

Problem