Javascript 从集合获取json以在backbone.js中查看

我是backbone.js新手，我的应用程序出现了一些问题。我有一个依赖于json数据源的集合。我能够在我的解析方法中console.log json。这足以将集合绑定到我的视图吗？我不明白fetch方法的用法

我的收藏如下：

(function (collections,model) {
collections.Directory = Backbone.Collection.extend({
        initialize : function(){
            console.log('we are here');
            },
        model:model.item,
        url:'collections/json/data.json',
        parse:function(response){
                console.log(response);
                return response;
            }
    });
})(app.collections,app.models);

我的主视图是这样的

(function(views,collections){

views.masterView = Backbone.View.extend({
         el : $("#contacts"),
        initialize : function(){
            console.log('view initialize inside render');
            this.render();
            this.$el.find("#filter").append(this.createSelect());
            this.on("change:filterType", this.filterByType, this);
            this.collection.on("reset", this.render, this);
            this.collection.on("add", this.renderContact, this);
            //console.log('we are here'+app.collections.CollectionItems.fetch());
            console.log('view initialize');
        },

        render : function(){

            this.$el.find("article").remove();
            _.each(this.collection.models,function(item){

                this.renderContact(item);
               },this);

            },
             renderContact: function (item) {
            views.contactView = new app.views.ContactView({
                model: item
            });
            this.$el.append(contactView.render().el);
        },
            getTypes : function () {
            return _.uniq(this.collection.pluck("Qno"));
        },
    createSelect : function () {

        var select = $("<select/>", {
                    html: "<option value='all'>All</option>"
                });
    _.each(this.getTypes(), function (item) {
        var option = $("<option/>", {
            value: item.toLowerCase(),
            text: item.toLowerCase()
        }).appendTo(select);
    });
    return select;
    },
     events: {
            "change #filter select": "setFilter",
            "click #add": "addContact",
            "click #showForm": "showForm"
        },
    setFilter : function(e){
        this.filterType = e.currentTarget.value;
        this.trigger("change:filterType");

    },
    filterByType: function () {
    if (this.filterType === "all") {
        this.collection.reset(contacts);
        routerURL.navigate("filter/all");
    } else {
        this.collection.reset(contacts, { silent: true });
        var filterType = this.filterType,
            filtered = _.filter(this.collection.models, function (item) {
            return item.get("type").toLowerCase() === filterType;
        });
        this.collection.reset(filtered);
        routerURL.navigate("filter/"+filterType);
    }
},
    addContact : function(e){
        e.preventDefault();
        var contModel = {};
        $("#addContact").children("input").each(function(i, el){
            if($(el).val() !== "")
                contModel[el.id] = $(el).val();

        });
        contacts.push(contModel);
        if (_.indexOf(this.getTypes(), contModel.type) === -1) {
                this.collection.add(new Contact(contModel));
                this.$el.find("#filter").find("select").remove().end().append(this.createSelect());
            } else {
                this.collection.add(new Contact(contModel));
            }
    },
    showForm : function(){
        this.$el.find("#addContact").slideToggle();   
    }

        });
      })(app.views,app.collections);

我在视图和集合中有一个js文件

    (function () {

        window.app = {};
        app.collections = {};
        app.models = {};
        app.views = {};
        app.mixins = {};

       $(function(){
                app.collections.CollectionItems = new app.collections.Directory();
                //app.collections.CollectionItems.fetch();
                //console.log(app.collections.CollectionItems.fetch());

                app.collections.CollectionItems.fetch({
                    success: function (collection,response) {
                        console.log(response);
                    }
                });
                //console.log(app.collections.CollectionItems.toJSON());
                console.log('coll started');
                app.views.app = new app.views.masterView({collection: app.collections.CollectionItems});
                console.log('view is jus about fine!!');
                //app.views.pagination = new app.views.PaginatedView({collection:app.collections.paginatedItems});
        });






    var ContactsRouter = Backbone.Router.extend({
    routes: {
        "filter/:type": "urlFilter"
    },
    urlFilter: function (type) {
        master.filterType = type;
        master.trigger("change:filterType");
    }
});

    var routerURL = new ContactsRouter();

    Backbone.history.start();
})();

我的登录页看起来像这样，里面有一个模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Backbone.js Web App</title>
        <link rel="stylesheet" href="css/screen.css" />
    </head>
    <body>

        <div id="contacts">

</div>

        <script id="contactTemplate" type="text/template">

            <h1><%= Qno %></h1>

        </script>
        <script src="js/jquery.js"></script>
        <script src="js/underscore-min.js"></script>
        <script src="js/backbone-min.js"></script>
        <script src="app.js"></script>
        <script src="collections/Directory.js"></script>
        <script src="models/item.js"></script>
        <script src="views/masterView.js"></script>
         <script src="views/simpleView.js"></script>
        <!--<script src="js/backbone.paginator.js"></script>-->
    </body>
</html>

Backbone.js Web应用程序

---

我就是想不起来。视图不使用集合数据呈现。请帮忙

我认为这是因为集合上的fetch方法是异步执行的，因此在创建视图时没有完成（如果查看控制台，我希望成功回调中的log语句显示在下面的log语句之后）。这意味着在填充集合之前会调用view render方法，并且不会触发重置事件（在视图中绑定到该事件）

尝试按如下方式更新实例化所有内容的代码：

   $(function(){
            app.collections.CollectionItems = new app.collections.Directory();
            //app.collections.CollectionItems.fetch();
            //console.log(app.collections.CollectionItems.fetch());

            app.collections.CollectionItems.fetch({
                success: function (collection,response) {
                    console.log(response);
                    app.views.app = new app.views.masterView({collection: app.collections.CollectionItems});
                }
            });
    });

---

我认为这是因为集合上的fetch方法是异步执行的，因此在创建视图时没有完成（如果查看控制台，我希望成功回调中的log语句显示在下面的log语句之后）。这意味着在填充集合之前会调用view render方法，并且不会触发重置事件（在视图中绑定到该事件）

尝试按如下方式更新实例化所有内容的代码：

   $(function(){
            app.collections.CollectionItems = new app.collections.Directory();
            //app.collections.CollectionItems.fetch();
            //console.log(app.collections.CollectionItems.fetch());

            app.collections.CollectionItems.fetch({
                success: function (collection,response) {
                    console.log(response);
                    app.views.app = new app.views.masterView({collection: app.collections.CollectionItems});
                }
            });
    });

---

看起来你还没有发布所有的代码，所以如果你能做到这一点，可能会有所帮助。您发布的代码中有许多缺少/未定义的变量。您是否正在使用任何模板，这可能会很有用，因为您似乎正在模板中构建许多DOM元素，而模板将清理这些元素/使其更易于理解。我的json看起来像[{“Qno”：0，“Desc”：“Qn0的Desc”}，{“Qno”：1，“Desc”：“Qn1的Desc”}，{“Qno”：2，“Desc”：“Qn2的Desc”}，{“Qno”：3，“Desc”：“Qn3的Desc”}，{“Qno”：4，“Desc”：“Qn4的Desc”}]看起来好像还没有发布您的所有代码，所以如果您能够做到这一点，它可能会有所帮助。您发布的代码中有许多缺少/未定义的变量。您是否正在使用任何模板，这可能会很有用，因为您似乎正在模板中构建许多DOM元素，而模板将清理这些元素/使其更易于理解。我的json看起来像[{“Qno”：0，“Desc”：“Qn0的Desc”}，{“Qno”：1，“Desc”：“Qn1的Desc”}，{“Qno”：2，“Desc”：“Qn2的Desc”}，{“Qno”：3，“Desc”：“Qn3的Desc”}，{“Qno”：4，“Desc”：“Qn4的Desc”}]非常感谢您对我的查询作出的回复。现在，我已将视图更改为在填充集合后实例化。但是，渲染函数的行为不符合预期。我怀疑集合模型配对有什么问题，但不知道是什么问题。在集合中循环时，我什么也没有得到。返回的json看起来像[{“Qno”：0，“Desc”：“Qn0的Desc”}，{“Qno”：1，“Desc”：“Qn1的Desc”}，{“Qno”：2，“Desc”：“Qn2的Desc”}，{“Qno”：3，“Desc”：“Qn3的Desc”}，{“Qno”：4，“Desc”：“Qn4的DescQno:0 proto:Object，Object Desc:“Qn1描述”Qno:1 proto:Object，Object Desc:“Qn2描述”Qno:2 proto:Object，Object Desc:“Qn3描述”Qno:3 proto:Object，Object Desc:“Qn4描述”Qno:4 proto:Object]控制台是这样从fetch方法记录的呈现函数以何种方式不能按预期工作？您可以通过在视图中检查模型集合对来排除该问题。在render方法中插入断点并确保已填充集合，或者在each循环-console.log（'Model:'，item.get（'Qno'）中记录每个项的值；当我试图循环浏览集合中的模型并记录一些内容时，我什么都没有得到。但是集合已填充并记录在fetch方法中。非常感谢您对我的查询做出响应。现在，我已将视图更改为在填充集合后实例化。但是，渲染函数的行为不符合预期。我怀疑集合模型配对有什么问题，但不知道是什么问题。在集合中循环时，我什么也没有得到。返回的json看起来像[{“Qno”：0，“Desc”：“Qn0的Desc”}，{“Qno”：1，“Desc”：“Qn1的Desc”}，{“Qno”：2，“Desc”：“Qn2的Desc”}，{“Qno”：3，“Desc”：“Qn3的Desc”}，{“Qno”：4，“Desc”：“Qn4的DescQno:0 proto:Object，Object Desc:“Qn1描述”Qno:1 proto:Object，Object Desc:“Qn2描述”Qno:2 proto:Object，Object Desc:“Qn3描述”Qno:3 proto:Object，Object Desc:“Qn4描述”Qno:4 proto:Object]控制台是这样从fetch方法记录的呈现函数以何种方式不能按预期工作？您可以通过在视图中检查模型集合对来排除该问题。在render方法中插入断点并确保已填充集合，或者在each循环-console.log（'Model:'，item.get（'Qno'）中记录每个项的值；当我试图循环浏览集合中的模型并记录一些内容时，我什么都没有得到。但是集合被填充并记录在fetch方法中。