javascript - 为什么 'fetch function' 自动调用 'parse function' on backbone.js 集合？

Question

我正在尝试将我的 json 文件解析为 Backbone 集合和模型，如下所示。

这是.json文件

[
{
    "type": "rect",
    "x": 10,
    "y": 10,
    "w": 100,
    "h": 100,
    "color": "red"
},
{
    "type": "arc",
    "x": 210,
    "y": 20,
    "w": 200,
    "h": 150,
    "color": "blue"
}
]

我还有如下所示的 .html 文件。

    <script>
    $(function() {
        var JSONModel = Backbone.Model.extend({});

        var MyCollection = Backbone.Collection.extend({
            model : JSONModel,
            url : 'profiles.json',
            initialize : function() {
                alert("init");
            },
            parse : function(response) {

                for (var i = 0; i < response.length; i++) {
                    var tmpModel = new JSONModel();
                    tmpModel.set({
                        type : response[i].type,
                        x : response[i].x,
                        y : response[i].y,
                        w : response[i].w,
                        h : response[i].h,
                        color : response[i].color
                    });
                    this.add(tmpModel);
                    alert("inserting" + i);
                }

                return response;
            }

        });

        var collection = new MyCollection();
        collection.fetch();
        alert(collection.length);


    });
</script>

---

问。

1.这段代码中，fetch函数为什么调用parse函数？

2.fetch函数是否调用了其他函数？

3.你认为我该如何修复这段代码来获取json对象？我无法在此代码中获取“collection.length”。

请帮忙。

Answer 1

请查看下面我对您的问题的评论:

1。这段代码中，fetch函数为什么调用parse函数？

回答:在扩展 Backbone.Collection 时，您已经覆盖了 parse 回调函数并且 Backbone 在内部调用了每当我们尝试获取 集合时，parse 函数。这是标准调用。我不认为你必须或可以改变这种行为。

2。 fetch 函数是否调用了其他函数？

回答: 据我所知，我认为在调用 fetch 时不会调用任何其他回调函数。你为什么要找它？您对这一点的要求是什么？有什么具体原因吗？

3。您认为我该如何修复此代码以获取 json 对象？我无法在此代码中获取“collection.length”。

回答:您必须等到我们收到数据，因此我们需要按以下方式添加success 处理程序:

collection.fetch({
  success: function(collection){
    // Callback triggered only after receiving the data.
    console.log(collection.length); 
  }
});