Backbone：如何在视图中加载集合（需要）

Question

我正在尝试将数据从 API 加载到视图中。然而，在我看来，数据并没有出现。

我尝试在路由器和模型中获取集合信息。 然而，日期甚至不会 console.log 数据。更不用说我可以将数据加载到视图中了。

我正在使用 require 来加载 JavaScript 文件。你能看看我在这里做错了什么吗？

我确实看到了这个 console.log： console.log("人物集合已初始化");

我还可以看到加载的页面和 json。但不是url函数中数据的console.log...实际上我在控制台中得到了这个错误：

Error: A "url" property or function must be specified

在骨干路由器中：

var OF = OF || {};

OF.AdminRouter = Backbone.Router.extend({

    routes: {
        "users": "goToUsers",
        "users/*other": "goToUsers"
    },

    goToUsers: function() {

        require(['./models/users', './views/users_view', './views/menu_view', './collections/user_collection'], function(UsersMdl, UsersView, MenuView, UsersCollection) {

            OF.usersView = new OF.UsersView;
            OF.usersView.render();

        });

    }

});

收藏：

var OF = OF || {};

OF.UsersCollection = Backbone.Collection.extend({

    initialize: function() {
        console.log("People Collection is initialized");
    },

    url: function() {

        var that = this;

        var sendObj = {
            "admin": OF.login.attributes.admin,
            "session": OF.login.attributes.session
        };


        $.ajax({
            url: 'php/api/users/',
            type: "POST",
            dataType: "json",
            data: sendObj,
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log("ERR: " + data);
            }

        });

    },

    model: OF.UsersMdl

});

模型：

var OF = OF || {};

OF.UsersMdl = Backbone.Model.extend({

    default: {

        username: '',
        homefoldersize: '',
        email: ''

    },

    initialize: function(){

        //on change functions can be done here
        OF.usersCollection = new OF.UsersCollection();
        OF.usersCollection.fetch();

    },

    result: {
        success: false,
        message: ''
    },

    validate: function(att) {

    }

});

观点：

var OF = OF || {};

OF.UsersView = Backbone.View.extend({

    el: '#content',

    remove: function() {

        this.$el.empty();
        this.stopListening();
        return this;
    },

    initialize: function() {

        //set the new address variable.
        OF.usersMdl = OF.usersMdl || new OF.UsersMdl();

    },

    render: function() {

        /*
        //first check if you are allowed to see this page
        if (!OF.login || !OF.login.isValid()) {
            OF.router.navigate('login', {trigger: true});
            return;
        }
        */

        //save this in that
        var that = this;

        //when importing of login page (and fill it with info) is done
        $.when(OF.template.get('users-usersField', function(data) {

            var htmlSource = $(data).html();
            var template = Handlebars.compile(htmlSource);
            var compiled = template(OF.usersMdl.attributes);

            //now place the page
            that.$el.html(compiled);

            //then start the menu
        })).then(function(){
                setTimeout(function(){
                    OF.menuView = new OF.MenuView;
                    OF.menuView.render();
                }, 100);

            });

        $('#logout').show();

    }

});

谢谢。

Answer 1

好像调用了两次集合的初始化，然后继续调用json函数。

在你的模型初始化中

OF.usersCollection = new OF.UsersCollection();
OF.usersCollection.fetch();

但是当你获取你的集合时，它会为它返回的每个结果初始化模型......然后会触发新的集合获取。

您无需在模型中为模型创建集合，尤其是当模型是由集合创建时。每当您将模型添加到集合时（包括集合在获取后创建模型时），集合都会将自身与模型相关联。

事情的一般顺序应该是：

1. 您在您的集合上定义一个 url 函数，该函数返回您可以获取该集合的（原始 JSON）模型的 URL。
2. 您实例化该集合，然后在实例上调用 fetch
3. 集合进行 AJAX 调用（您可以通过覆盖 fetch 或 sync 来影响）并取回所有模型的原始 JSON。
4. 集合为它返回的每个结果实例化新模型；这些模型会自动添加到集合中，并且它们的 .collection 会自动设置到集合中。
5. 一旦OF.usersCollection.fetch().done(function() {...，您就可以让您的视图开始执行操作，因为您的收藏现在应该已经全部设置好了。