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. 模型/集合触发 AJAX 请求（可能是响应fetch调用）
  5. 视图的事件处理程序被触发
  6. 视图的事件处理程序更新页面

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

值得一提的是，这reset并不总是您想要绑定的事件。例如，您可能不想响应 AJAX 请求，除非它更改了模型的属性“X”。在这种情况下，您可以改为绑定到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 回答