骨幹渲染不渲染選擇標籤

Question

我已經有一個簡單的div，我希望骨幹在我的服務器上渲染一個select框和options。

該選項似乎渲染得很好，但選擇框沒有。我相信這是一個簡單的調整，但似乎無法找到它。

我創建了它的簡化小提琴：http://jsfiddle.net/thunderrabbit/BNZY3/

的HTML

<div id="where_fields"></div> 

我使用用途fetch()來獲取數據的腳本。上面的小提琴硬編碼數據，但問題是相同的。

(function($){ 
    var Field = Backbone.Model.extend(); 

    var UnitFields = Backbone.Collection.extend({ 
     url: '/<?php echo CONFIG_ADMIN_DIR; ?>/api/fieldnames/units', 
     model: Field 
    }); 

    var BuildingFields = Backbone.Collection.extend({ 
     url: '/<?php echo CONFIG_ADMIN_DIR; ?>/api/fieldnames/buildings', 
     model: Field 
    }); 

    var FieldView = Backbone.View.extend({ 
     tagName: "option", 

     initialize: function(){ 
      _.bindAll(this, 'render'); 
     }, 
     events: { 
      "click":"clicked" 
     }, 
     clicked: function(e) { 
      var data_type = this.model.get("DATA_TYPE"); 
      if(data_type == "varchar") { 
       console.log("it's a varchar"); 
      } 
      if(data_type == "int") { 
       console.log("it's an int"); 
      } 

     }, 
     render: function(){ 
      $(this.el).attr('value', this.model.get('COLUMN_NAME')).html(this.model.get('display_name')); 
      return this; 
     } 
    }); 

    var FieldsView = Backbone.View.extend({ 
     tagName: "select", 
     el: $('#where_fields'), 
     initialize: function(){ 
      _.bindAll(this, 'render', 'renderItem'); 
      this.collection.bind('reset', this.render); 
     }, 
     renderItem: function(model) { 
      console.log('rendr item'); 
      var fieldView = new FieldView({model:model}); 
      fieldView.render(); 
      $(this.el).append(fieldView.el); 
     }, 
     render: function(){ 
      console.log('rendr'); 
      this.collection.each(this.renderItem); 
      return this; 
     } 
    }); 

    var units_fields = new UnitFields(); 
    var buildings_fields = new BuildingFields(); 

    var unitsView = new FieldsView({collection: units_fields}); 
    var buildingsView = new FieldsView({collection: buildings_fields}); 

    units_fields.fetch(); 
    buildings_fields.fetch(); 

})(jQuery); 

爲什麼我的骨幹腳本沒有渲染select標籤？

Answer 1

您的FieldsView類中同時具有tagName和el屬性。你不需要兩個。如果要渲染從DOM分離的視圖，則使用tagName，然後主幹將使用該標記而不是默認的div。但是，在您的render()中，您實際上沒有涉及到select標籤。 $(this.el)是你的#where_fields股利，你只是追加fieldView.el，這是一個option元素。這就是爲什麼沒有select元素。一些快速提示：

• 使用this.$el作爲一種更高效的速記$(this.el)
• 是更好，讓您從DOM鬆耦合視圖，因此el: $('#where_fields')是不是乾淨的設計渲染與DOM分離的元素並讓其他代碼確定它應該附加到現有DOM中的哪個位置。
• 所以，你應該刪除您el正確，設置tagName到select如果你喜歡，那麼你的render()方法將做你想要的附加options到select標籤是什麼，然後將實際的代碼追加視圖的渲染el到或許，#where_fields div的視圖進入你的路由器。