2

私がやろうとしているのは、データベースを呼び出して、結果を HTML に表示することです。データを表示する方法がわからないことを除いて、すべてが機能しています（データはデータベースから正常に返されます）。

それが非同期であることはわかっていfetch()ますが、それをコレクション ビューに接続する方法がわかりません。ここに私のバックボーンがあります:

    (function() {
        window.App = {
            Models: {},
            Collections: {},
            Views: {},
            Router: {}
        };

        window.template = function(id) {
            return _.template( $('#' + id).html() );
        };

        App.Models.Main = Backbone.Model.extend({
            defaults : {
                FName: ''
            }
        });

        App.Collections.Mains = Backbone.Collection.extend({
            model: App.Models.Main,
            initialize: function(mains) {
                this.fetch({success: function(main) {
                    $('#web-leads').html(main);
                }});
            },
            url: '../leads/main_contact'
        });

        App.Views.Mains = Backbone.View.extend({
            tagName: 'ul',
            render: function() {
                var ul = this.collection.each(this.addOne, this);
                return ul;
            },
            addOne: function(main) {
                var mainC = new App.Views.Main({ model: main});
                this.$el.append(mainC.render().el);
                return this;
            }
        });

        App.Views.Main = Backbone.View.extend({
            tagName: 'li',
            template: template('mainContactTemplate'),
            render: function () {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }

        });

        main = new App.Views.Main();
        mains = new App.Collections.Mains(main);

    })();

私ができる必要がある$('#web-leads').html()のは、から返された値で呼び出すことmainsです。それ、どうやったら出来るの？

4

2 に答える 2

1

Backbone でのこの種の一般的なパターンは次のとおりです。

  1. モデルまたはコレクションを作成する
  2. そのモデル/コレクションをビューに渡します
  3. そのビューは、モデル/コレクションにイベント ハンドラーを登録します
  4. fetchモデル/コレクションが AJAX リクエストをトリガーします (おそらく呼び出しに応答して)
  5. ビューのイベント ハンドラーがトリガーされる
  6. ビューのイベント ハンドラがページを更新する

resetしたがって、mu は短すぎることが示唆されているため、このパターンに従い、ビューにハンドラーをコレクションのイベントにバインドさせるのが最善の策です。

ただし、それresetが常にバインドしたいイベントであるとは限りません。たとえば、モデルの属性「X」を変更しない限り、AJAX リクエストに応答したくない場合があります。その場合、代わりに にバインドするとchange:X、AJAX 応答が X を変更した場合にのみハンドラーがトリガーされます。

可能なすべてのオプションを表示するには、次を参照してください。

http://documentcloud.github.com/backbone/#Events-catalog

于 2013-01-04T19:48:26.333 に答える
0

コレクションがビューをリッスンするのではなく、ビューがコレクションをリッスンする必要があるだけで、正しい軌道に乗っていました。

以下は、誰が誰をリッスンするかを少し変更したコードです。

なんで？理想的には、コレクションがビューのことを何も認識しないようにする必要があります。

(function() {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
    };

    window.template = function(id) {
        return _.template( $('#' + id).html() );
    };

    App.Models.Main = Backbone.Model.extend({
        defaults : {
            FName: ''
        }
    });

    App.Collections.Mains = Backbone.Collection.extend({
        model: App.Models.Main,

        url: '../leads/main_contact'
    });

    App.Views.Mains = Backbone.View.extend({
        tagName: 'ul',
        initialize : function(){
          this.collection.on('reset', this.render, this);
        },
        render: function() {
            var ul = this.collection.each(this.addOne, this);
            return ul;
        },
        addOne: function(main) {
            var mainC = new App.Views.Main({ model: main});
            this.$el.append(mainC.render().el);
            return this;
        }
    });

    App.Views.Main = Backbone.View.extend({
        tagName: 'li',
        template: template('mainContactTemplate'),
        render: function () {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }

    });

    mains = new App.Collections.Mains();
    main = new App.Views.Main( {'collection' : mains} );
    mains.fetch(); 

})();
于 2013-01-04T19:46:59.640 に答える