骨干渲染不渲染选择标签

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的视图进入你的路由器。