爲什麼我無法獲得兩次我的視圖渲染？

Question

我是backbone.js和JavaScript的noob在這方面......我試圖用Jquery和backbone.js構建一個簡單的小部件系統，但我似乎無法弄清楚如何獲得多個我的視圖實例呈現。然而，我可以得到一個實例來渲染......我的最終目標是建立一個系統，在這個系統中，我可以點擊一個按鈕，並讓它每次在屏幕上渲染一個新的小部件。 這裏是我的代碼：

<script type="text/template" id="widget-template"> 
    <div class="widget-wrap"> 
     <div class="widget-header"> 
      <span class="widget-title"><%= widgetInfo.get('title') %></span> 
      <span class="widget-close"></span> 
      <span class="widget-hide"></span> 
      <span class="widget-expand"></span> 
     </div> 
     <div class="widget-container"> 
      <!-- this is where the widget content goes --> 

     </div> 
</div> 
    </script> 


    <script typ="text/javascript"> 

     var baseWidget = Backbone.Model.extend({ 
      defaults: { 
       title: "Base", 
       author: "AB", 
       multipleInstances: false, 
       description: "This is the base widget", 
       pathToIcon: "", 
       state: "Open", 
       position: {left:0, top:0} 
       } 

     }); 




    var widgetCollection = Backbone.Collection.extend({ 
     model: baseWidget 

    }); 

    var widgetcol = new widgetCollection(); 

     var baseView = Backbone.View.extend({ 
      el: '.wraper', 
      render: function(pos = {left:0, top:0}) { 
       var widget = new baseWidget(); 
       widgetcol.add(widget); 
       console.log(widgetcol.length); 
       widget.set({'position':pos}) 




       var template = _.template($('#widget-template').html(), {widgetInfo: widget}); 
       this.$el.html(template); 
       this.$el.offset({top:widget.get('position').top, left:widget.get('position').left}) 
       $('.widget-wrap').draggable({ 
        handle: ".widget-header", 
        stop: function (event, ui) { 
         widget.set({position: ui.position}); 
         console.log(widget.get('position')); 
        } 

       }); 

      } 
     }); 



     BV = new baseView(); 
     BV.render({left:0, top:0}); 


     b = new baseView(); 
     b.render({left:500, top:0}); 

任何幫助，將不勝感激，也如果我做任何事真奇怪我很想了解如何做的更好的建議。

Answer 1

當您在視圖中設置el屬性時，您將視圖綁定到dom中的現有元素，限制自己僅創建一個小部件。你真正想要做的是讓視圖生成元素標記，並將所有生成的小部件附加到某個父級。 您可以通過在視圖中設置tagName,className和id屬性來完成此操作。

例如：

var baseView = Backbone.View.extend({ 
    tagName: 'div', 
    className: '.wrapper' 
    ... 
}); 

這將產生一類的wrapper可以追加到一個容器div。

後來，你定義一個click事件來創建一個新的widget每次：

$('button').click(function() { 
    var newView = new baseView(); 
    newView.render(); 
    $('.container').append(newView.el); // now 'el' correspond to the div.wrapper you just created 
}); 

它被認爲是骨幹開發人員之間的一個很好的做法，從視圖的渲染方法返回this。這樣，你可以在最後兩行混合是這樣的：

$('.container').append(newView.render().el); 

而且，而是如果視圖的定義之前instanciating集合，人們往往會收集傳遞作爲構造函數參數的屬性：

var collection = new widgetCollection(); 
BV = new baseView({ collection: collection }); 

現在，您只需通過this.collection即可查看視圖內的集合。