backbone.js - Having multiple instances of the same view

Posted by TrueWheel on Stack Overflow See other posts from Stack Overflow or by TrueWheel
Published on 2012-06-27T14:59:01Z Indexed on 2012/06/27 15:16 UTC
Read the original article Hit count: 215

Filed under:
|

I am having problems having multiple instances in of the same view in different div elements. When I try to initialize them only the second of the two elements appear no matter what order I put them in.

Here is the code for my view.

  var BodyShapeView = Backbone.View.extend({
    thingiview: null,
    scene: null,
    renderer: null,
    model: null,
    mouseX: 0,
    mouseY: 0,

events:{
  'click button#front' : 'front',
  'click button#diag' : 'diag',
  'click button#in' : 'zoomIn',
  'click button#out' : 'zoomOut',
  'click button#on' : 'rotateOn',
  'click button#off' : 'rotateOff',
  'click button#wireframeOn' : 'wireOn',
  'click button#wireframeOff' : 'wireOff',
  'click button#distance' : 'dijkstra'
},

initialize: function(name){
  _.bindAll(this, 'render', 'animate');

     scene = new THREE.Scene();
     camera = new THREE.PerspectiveCamera( 15, 400 / 700, 1, 4000 );
     camera.position.z = 3;
     scene.add( camera );
     camera.position.y = -5;

     var ambient = new THREE.AmbientLight(  0x202020 );
     scene.add( ambient );

     var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
     directionalLight.position.set( 0, 0, 1 );
     scene.add( directionalLight );


     var pointLight = new THREE.PointLight( 0xffffff, 5, 29 );
     pointLight.position.set( 0, -25, 10 );
             scene.add( pointLight );

     var loader = new THREE.OBJLoader();
     loader.load( "img/originalMeanModel.obj", function ( object ) {

        object.children[0].geometry.computeFaceNormals();
        var  geometry = object.children[0].geometry;
                console.log(geometry);
        THREE.GeometryUtils.center(geometry);
        geometry.dynamic = true;
        var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
        mesh = new THREE.Mesh(geometry, material);
        model = mesh;
        // model = object;
        scene.add( model );
     } );

     // RENDERER
     renderer = new THREE.WebGLRenderer();
     renderer.setSize( 400, 700 );
     $(this.el).find('.obj').append( renderer.domElement );

    this.animate();

},

Here is how I create the instances

var morphableBody = new BodyShapeView({ el: $("#morphable-body") });

  var bodyShapeView = new BodyShapeView({ el: $("#mean-body") });

Any help would be really appreciated.

Thanks in advance.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about backbone.js