Backbone.js 如何将异步主干事件挂钩到HTML的显示

我试图做的是调用数据库，然后用一些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

返回的值。如何做到这一点？

您的做法是正确的，只需要让视图侦听集合，而不是让集合侦听视图

下面是您的代码，对who侦听who稍加修改

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

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

})();

---

主干中这类事情的一般模式是：

创建模型或集合

将该模型/集合传递给视图

该视图在模型/集合上注册事件处理程序

模型/集合触发AJAX请求（可能是响应

fetch

调用）

将触发视图的事件处理程序

视图的事件处理程序更新页面

因此，正如mu太短所建议的那样，您最好遵循这种模式，让视图将处理程序绑定到集合的

reset

事件

但是值得一提的是，

reset

并不总是要绑定的事件。例如，您可能不想响应AJAX请求，除非它更改了模型的属性“X”。在这种情况下，您可以改为绑定到

change:X

，然后仅当AJAX响应更改了X时才会触发处理程序

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

---

您的视图应该监听集合中的

“reset”

事件（这是

获取

将触发的），然后视图处理所有HTML内容。一个集合不应该和DOM混在一起。在哪里侦听侦听重置？显示集合的任何视图都应

this.collection.on（'reset'，…）

。我得走了，否则我会给你一个更彻底的答案。谢谢你的帮助。你的答案可能很好，但是没有解释，它看起来真的像一堵代码墙。你为什么拿出

fetch（）

？没有这个就不行。即使这样，我也认为它不起作用。@nikoshr我有点匆忙，所以我认为代码至少会把问题指向正确的方向。@sehummel我只是忘记了.fetch（）调用。