Question

我要做的是调用数据库，然后在某些HTML中显示结果。我有一切工作（数据从数据库回来就好），除了我无法弄清楚显示数据。

我知道fetch()是异步的，但我不确定如何将它连接到我的集合视图中。这是我的Backbone：

    (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。我该怎么做？

Answer 1

Backbone中此类事物的一般模式是：

创建模型或集合
将该模型/收藏品传递给视图
该视图在模型/集合上注册事件处理程序
模型/集合触发AJAX请求（可能是为了响应fetch调用）
触发视图的事件处理程序
视图的事件处理程序更新页面

因此，由于mu太短，建议您最好选择遵循此模式并让您的视图将处理程序绑定到您的集合的reset事件。

值得一提的是，reset并不总是您要绑定的事件。例如，您可能不想响应AJAX请求，除非它更改了模型的属性“X”。在这种情况下，您可以绑定到change:X，然后只有在AJAX响应更改X时才会触发您的处理程序。

要查看所有可能的选项，请参阅：

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

Answer 2

你在正确的轨道上只需要让视图听取集合，而不是听取视图的集合。

以下是您的代码，稍微修改了谁听谁。

为什么呢？理想情况下，我们希望集合对视图一无所知。

(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(); 

})();

如何将异步Backbone事件挂钩到HTML的显示

2 个答案: