javascript - backbone.js - 具有同一 View 的多个实例

Question

我在同一 View 的不同 div 元素中有多个实例时遇到问题。当我尝试初始化它们时，无论我将它们放入什么顺序，都只会出现两个元素中的第二个。

这是我的 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();

},

这是我创建实例的方式

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

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

任何帮助将不胜感激。

提前致谢。

Answer 1

在您的initialize方法中，您访问全局变量而不是实例变量:scene = new THREE.Scene(); 实际上会引用 window.scene 。

检查这个例子

var BodyShapeView = Backbone.View.extend({
    scene:null,
    initialize:function(opts) {
        scene=opts.scene;
    }
});

var s1=new BodyShapeView({scene:'s1'});
var s2=new BodyShapeView({scene:'s2'});

console.log(window.scene);  //outputs s2
console.log(s1.scene); //outputs null

http://jsfiddle.net/K8tjJ/1/

将这些引用更改为 this.scene、this.camera 等

var BodyShapeView = Backbone.View.extend({
    scene:null,
    initialize:function(opts) {
        this.scene=opts.scene;
    }
});

var s1=new BodyShapeView({scene:'s1'});
var s2=new BodyShapeView({scene:'s2'});

console.log(window.scene); //outputs undefined
console.log(s1.scene); //outputs s1

http://jsfiddle.net/K8tjJ/2/

此外，loader.load 使用回调来处理其结果，您将(可能)丢失函数中对 this 的引用。尝试

var _this=this;
loader.load( "img/originalMeanModel.obj", function ( object ) {
...
_this.scene.add( _this.mesh ); // or _this.model if you prefer, but beware

});

请注意，this.model 是 Backbone.View 中的一个特殊变量，如果您想将模型传递给 View ，则应谨慎对待。