1

selectバックボーンがボックスをサーバーからレンダリングするようにしたい単純なdivがあり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タグをレンダリングしないのはなぜですか?

4

1 に答える 1

3

クラスには と の両方tagNameのel属性がありますFieldsView。両方は必要ありません。tagNameDOM から切り離されたビューをレンダリングする場合に使用し、バックボーンはデフォルトの の代わりにそのタグを使用しますdiv。ただし、 では、実際にタグが関与render()することはありません。あなたのdivであり、要素であるfieldView.elを追加するだけです。だから要素がない。簡単なヒント:select$(this.el)#where_fieldsoptionselect

  • this.$elのより効率的な省略形として使用する$(this.el)
  • ビューを DOM から疎結合にしておくことが望ましいためel: $('#where_fields')、要素を DOM から切り離してレンダリングし、既存の DOM の正確な位置を他のコードに決定させるほどきれいなデザインではありません。
  • したがって、el適切に削除し、必要に応じて設定tagNameすると、メソッドはタグに追加することで目的の処理を実行し、実際のコードを移動して、レンダリングされたビューをビューの外の div からルーターに追加する必要があります。 .selectrender()optionsselectel#where_fields
于 2012-11-14T03:20:35.193 に答える