Display Image with Backbone + KineticJS - backbone.js

Question

I'm trying to load an image on canvas using Backbone + KineticJS. However the image doesn't seem to appear.
First I load the images using a model. (I'm loading the image locally so its already available)
var KineticModel = Backbone.Model.extend({
myImg: null,
createImg : function() {
var imageObj = new Image();
var kinImg = new Kinetic.Image()
imageObj.onload = function() {
kinImg.setAttrs({
x: 10,
y: 10,
image: imageObj,
width: 578,
height: 400
})
}
imageObj.src = 'test/img/vader.png';
return kinImg;
}
});
Then create the View
var KineticView = Backbone.View.extend({
id: 'container',
stage: null,
layer: null,
initialize: function (options) {
model: options.model;
el: options.el;
this.layer = new Kinetic.Layer();
this.stage = new Kinetic.Stage({ container: this.el, width: 600, height: 600 });
this.stage.add(this.layer);
},
render: function () {
var myImg = this.model.createImg();
this.layer.add(myImg);
this.stage.add(this.layer);
this.stage.draw();
}
});
Finally to tie it all up
var KModel= new KineticModel({});
var imgcontainer = $('#container').get();
view = new KineticView({model:KModel, el:imgcontainer});
view.render();
The page loads without any errors, but no image.
Console logs show that the Image Models have been passed to the layers.
Any help will be greatly appreciated!

Answer 1

Redraw layer after setting attrs:
kinImg.setAttrs({
x: 10,
y: 10,
image: imageObj,
width: 578,
height: 400
});
yourLayer.draw();
Note: you are working with view (Kinetic object) inside Backbone.Model - this is bad approach. Model should works only with data. Move createImg function to View.
Also look at this plugin: https://github.com/slash-system/backbone.kineticview