È possibile combinare kinetic.js e backbone.js?

Question

Voglio codificare un'app che mette semplicemente un rettangolo sullo schermo. Ma ho bisogno di combinare kinetic.js e backbone.js per questo e non sono sicuro che possa essere fatto. Codice cinetica è:

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, 
    }); 

e la spina dorsale codice

$(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'); } 
}); 

* Ho aggiunto .html file di questi percorsi

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.3.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script> 

Tutto quello che voglio per posizionare una parte cinetica invece dei valori standard di backbone . È possibile?

Answer 1

Sì, questo è sicuramente possibile. Vorrei solo creare un modello che memorizza i dati che userete nella vostra forma, utilizzare una vista per rendere un tag span con click su me, collegare un listener di eventi allo span e quindi emettere il rettangolo quando l'utente fa clic.

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(); 

Vorrei aggiornare anche all'ultima versione di Backbone e Underscore.

Inoltre, grazie per aver segnalato Kinetic. Speriamo che abbia il supporto per disegnare sulla tela su un dispositivo mobile.

Answer 2

Con il vostro aiuto, abbiamo scritto questo esempio di lavoro che mette un rettangolo sullo schermo usando sia kinetic.js sia backbone.js. Vorrei che sarebbe utile per chi è alla ricerca di questo tipo di codice integrato. Grazie mille per il tuo aiuto!

var KineticModel = Backbone.Model.extend({ 
    myRect: null, 

    createRect : function() { 
      alert("rectangle created."); 
      var rect=new Kinetic.Rect({ 
          x: 10, 
          y: 10, 
          width: 100, 
          height: 50, 
          fill: 'green', 
          stroke: 'black', 
          strokeWidth: 1, 
          offset: [0, 0], 
          draggable: true, 
         }); 
      return rect; 
     } 
}); 

var KineticView = Backbone.View.extend({ 
     tagName: 'span', 
     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: 400, height: 400 }); 
      this.stage.add(this.layer); 
     }, 
     events: { 
      'click': 'spanClicked' 
     }, 
     render: function() { 
      var rect = this.model.createRect(); 
      this.layer.add(rect); 
      this.stage.add(this.layer); 
      alert("render"); 
     }, 
     spanClicked: function() { 

     } 
}); 

    var kModel = new KineticModel({}); 
    var kView = new KineticView({ el: '#container', model: kModel }); 

    $('#shapetest').click(function() { 
     kView.render(); 
    });