backbone.js - 具有相同視圖的多個實例

Question

我有不同的div元素在同一視圖中有多個實例的問題。當我嘗試對它們進行初始化時，無論按照什麼順序，只出現這兩個元素中的第二個。

這是我的視圖的代碼。

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一個特殊的變量，應小心對待，如果你想給一個模型傳遞到您的視圖。

Answer 2

el屬性只需要一個jQuery風格的選擇器字符串。嘗試：

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

UPDATE

而且，你的問題可能是定義scene，camera和renderer當你不使用this關鍵字。可能是因爲第二個視圖覆蓋了第一個視圖。嘗試：

this.scene = new THREE.Scene(); 
this.camera = new THREE.PerspectiveCamera(15, 400/700, 1, 4000); 

... 

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