呈現和刪除多個視圖...

Question

我希望我清楚，否則要求我澄清。
我想刪除一個主模板一致的結束創建視圖...

我沒有嘗試以下實現，但未成功。

// main-template.html 

    <div id=""project> 
    <div class="main-template"> 
     <div id="view1"></div> 
     <div class="foldable-block"> 
      <div id="view2"></div> 
      <div id="view3"></div>  
     </div> 
    </div> 
    </div> 

---

//mainView.js 
define([ 
    "js/views/view1", 
    "js/views/view2", 
    "js/views/view3", 
    "text!templates/main-template.html" 
], function (View1, View2, View3, mainTemaplte) { 

    var MainView = Backbone.View.extend({ 

     initialize: function() 
     { 
      this.$el.html(Mustache.render(mainTemaplte)); 
      this.render(); 
     }, 

     el: $("#project"), 

     render: function() 
     { 
      var options = this.options; 

      this.view1 = new View1(options); 
      this.view2 = new View2(options); 
      this.view3 = new View3(options); 
     } 
    });  

    return MainView; 
}); 

---

//view1.js 
define([… ], function (..) { 

    var View1 = Backbone.View.extend({ 

     el: $("#view1"), 

     initialize: function() { 
      console.log(this.$el) // [] 
      setTimeout(function() { 
        console.log(this.$el) // [] 
      }, 2000); 
     } 

    }); 

    return View1; 

}); 

，你可以從註釋中看到的問題是view1.js

(this.$el) // [] 

從我的js安慰它的工作原理：

$("#view1") // <div>….</div> 

個

我的目標是：
1）當我加載mainView.js模塊，我想，當我觸發刪除視圖創建到附上我的意見（視圖1，視圖2，視圖3）
2模板），每應該刪除附加視圖的DOM。
3）當我再次調用mainView.js模塊時，應該重新創建模板。

如果您有其他想法建議，請發帖。

---

由於@nikoshr建議this.$el，在view1.j，是指當我打電話呈現view1.js的this.$el是填補適當
但它沒有連接到文檔的身體。
如何在不使用追加或類似jQuery方法的情況下將其添加到我的main-template.html？

我在這裏的渲染功能：

render: function() 
    { 
     this.$el.html(Mustache.render(myTemplate, this.view); 
    } 

Answer 1

要連接您的子視圖不你需要他們的時候存在的元素。像這樣的東西可能是朝着正確方向邁出的一步：

mainView.js

define([ 
    "js/views/view1", 
    "js/views/view2", 
    "js/views/view3", 
    "text!templates/main-template.html" 
], function (View1, View2, View3, mainTemaplte) { 

    var MainView = Backbone.View.extend({ 

     initialize: function() 
     { 
      this.render(); 
     }, 

     render: function() 
     { 
      // render from template and assign this.el to the root of the element 
      // e.g #project 
      var html=Mustache.render(mainTemaplte); 
      this.setElement($(html)); 

      // create each view with its el set to the correct descendant 
      this.view1 = new View1(_.extend({el:this.$("#view1")} , this.options)); 
      this.view2 = new View2(_.extend({el:this.$("#view2")} , this.options)); 
      this.view3 = new View3(_.extend({el:this.$("#view3")} , this.options)); 
     } 
    });  

    return MainView; 
}); 

view1.js

define([… ], function (..) { 

    var View1 = Backbone.View.extend({ 

     initialize: function() { 
      console.log(this.$el); 
     } 

    }); 

    return View1; 
}); 

你還可以用像

重新創建你的看法

require(["js/views/mainView"], function(MainView) { 
    var view=new MainView(); 
    console.log(view.$el); 

    //attach the view to the DOM 
    $("body").append(view.$el); 
});