主干渲染不渲染选择标签答案

【问题标题】：backbone render not rendering select tags主干渲染不渲染选择标签
【发布时间】：2012-11-14 03:12:11
【问题描述】：

我有一个简单的 div，我希望主干从我的服务器渲染一个 select 框和 options。

选项似乎渲染得很好，但选择框却没有。我确定这是一个简单的调整，但似乎找不到它。

我为它创建了一个简化的小提琴：http://jsfiddle.net/thunderrabbit/BNZY3/

HTML

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

我使用的脚本使用fetch() 来获取数据。上面的 Fiddle 对数据进行了硬编码，但问题是一样的。

(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 标签？

【问题讨论】：

标签： backbone.js

【解决方案1】：

FieldsView 类中同时具有 tagName 和 el 属性。你不需要两者。如果你想渲染一个与 DOM 分离的视图，请使用 tagName，然后主干将使用该标签而不是默认的 div。但是，在您的render() 中，您实际上并没有涉及到select 标记。 $(this.el) 是您的 #where_fields div，您只需附加 fieldView.el，它是一个 option 元素。这就是为什么没有select 元素的原因。一些快速提示：

使用this.$el 作为$(this.el) 的更有效的简写形式
最好保持视图与 DOM 松散耦合，因此el: $('#where_fields') 的设计不如渲染与 DOM 分离的元素并让其他代码决定它应该在现有 DOM 中的确切位置附加。
所以你应该正确删除你的el，如果你愿意，将tagName设置为select，然后你的render()方法将做你想做的事情，就是将options附加到select标签上，然后移动实际代码以将视图呈现的el 附加到视图之外的#where_fields div 中，可能会进入路由器。

【讨论】：