Backbone - 无法遍历对象属性答案

【问题标题】：Backbone - cannot traverse through object propertiesBackbone - 无法遍历对象属性
【发布时间】：2014-01-20 19:36:54
【问题描述】：

我正在尝试遍历 json 文件的属性。您可以在http://jsfiddle.net/gerlstar/qRV7k/ 中查看我的代码。在第 38 行，它应该在控制台中返回“name”和“age”的值。有谁知道我做错了什么？

    var app = {};

     app.model2 = Backbone.Model.extend({
      defaults: {
        age: '',
        name: ''
       }
      });

    app.collec = Backbone.Collection.extend({
    model: app.model2,
    url: 'http://echo.jsontest.com/name/betty/age/22',
    parse: function (response) {
        return response;
    },
    initialize: function () {
        console.info("init ...");
        this.fetch({
            success: function (obj, s, jqxhr) {
                // console.log(s);
            },
            error: function (funds) {
                console.error("Error in fetch in collec");
            }
        });
    }
});

app.model_with_collec = Backbone.Model.extend({
    initialize: function(){
        //console.info(this);
        this.set({
            my_kids: new app.collec()
        });

        var mo = this.get('my_kids').models;
       console.log(mo);
        console.log(mo.attributes);//undefined is returned

    }

});

new app.model_with_collec();

【问题讨论】：

标签： json backbone.js collections model fetch

【解决方案1】：

如果您像这样运行代码，它将按顺序执行，并在服务器甚至响应其余调用之前到达 console.log。所以打印 undefined 是正常的。

这里是打印你想要的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <!-- /inladen bower_components -->
    <script>
        var app = {};

        app.model2 = Backbone.Model.extend({
            defaults: {
                age: '',
                name: ''
            }
        });

        app.collec = Backbone.Collection.extend({
            model: app.model2,
            url: 'http://echo.jsontest.com/name/betty/age/22',
            parse: function(response) {
                return response;
            },
            initialize: function() {
                console.info("init ...");
                this.fetch({
                    success: function(obj, s, jqxhr) {
                        // console.log(s);
                    },
                    error: function(funds) {
                        console.error("Error in fetch in collec");
                    }
                });
            }
        });

        app.model_with_collec = Backbone.Model.extend({
            initialize: function() {
                //console.info(this);
                this.set({
                    my_kids: new app.collec()
                });

                this.get('my_kids').bind('reset', this.logAttributes, this);
            },

            logAttributes: function() {

                var mo = this.get('my_kids').models;

                console.log(mo);
                console.log(mo[0].attributes);
            }

        });

        new app.model_with_collec();
    </script>
</head>
</html>

【讨论】：

嘿，试过jsfiddle.net/gerlstar/3mASU，但它没有显示控制台..
嗯。我是否缺少某些东西，因为它仍然无法正常工作。 jsfiddle 中的控制台没有显示任何内容。如果我在我的 Firefox 上尝试它也是如此。 imgur.com/vbLLZVu。它显示一个空数组而不是长度为 1 的数组
当我在这个例子jsfiddle.net/3mASU/1上点击运行时，我有这个输出：init ... GET echo.jsontest.com/name/betty/age/22 [Object {cid="c2", attributes=Object, collection=Object , ...}]，属性填充了来自其余服务的数据
我看到了，但是当我在 jsfiddle 上点击“运行”时，{object ... } 更改为 [].. 你输入了什么来再次显示 {Object ...}？
我认为 jsfiddle 存在问题，因为当我添加 'alert(1);'在“logAttributes”函数的第一行，它总是打印正确的结果，无论如何我已经编辑了我的答案以包含完整的 html 代码。