Question

我正在尝试将API中的数据加载到视图中。但是，在我看来，这些数据并未出现。

我尝试在de router和模型中获取收集信息。但是日期甚至不会console.log数据。更别说我可以将数据加载到视图中了。

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

我确实看到了这个console.log： console.log（“人员集合已初始化”）;

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

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

在Backbone路由器中：

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

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

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

事情的一般顺序应该是：

您在集合中定义了一个url函数，该函数返回您可以获取该集合的（原始JSON）模型的URL。
您实例化该集合，然后在实例
该集合进行AJAX调用（您可以通过覆盖fetch或sync来影响）并获取所有模型的原始JSON。
该集合为其获取的每个结果实例化新模型;这些模型会自动添加到集合中，并且它们的.collection会自动设置为集合。
一旦OF.usersCollection.fetch().done(function() {...，你可以让你的观点开始做事，因为你的集合现在应该全部设定。

Backbone：如何在视图中加载Collection（包含要求）

1 个答案: