将一部分 JSON 数据解析到 Backbone 视图答案

【问题标题】：Parse a section of the JSON data to the Backbone view将一部分 JSON 数据解析到 Backbone 视图
【发布时间】：2014-06-18 12:24:08
【问题描述】：

我对骨干很陌生，我正在尝试将骨干整合到我的项目中。我有一个已在项目中使用的大型 JSON 文件。我的views 将主要由JSON 文件中的数据驱动。

示例 JSON 如下所示。

{
    "Cases": [
        {
            "x": "Cat",
            "y": 12, 
        }
    ],
    "Summary": [
        {
            "date" : "18/06/2014",
            "data" :{
                "ALL" : [
                    "Items" : 0
                ],
                "Cat" : [
                    "Items" : 10
                ]
            }
        }
    ]
}

我的收藏看起来像这样，而我想要使用来自 JSON 的只是 Summary

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {

    var DataModel = Backbone.Model.extend({});

    var DataCollection = Backbone.Collection.extend({
        model : DataModel,
        url : 'path/to/my/data.json',
        parse : function(response, xhr) {
            // I only want the Summary returned
            console.log(response.Summary); // Prints exactly what I need
            return response.Summary;
        }
    });

    return DataCollection;
});

我的视图是这样的

define(['jquery', 'underscore', 'backbone', '../../collections/DataCollection'], function($, _, Backbone, DataCollection) {

    var AppVIew = Backbone.View.extend({
        initialize : function() {
            var myData = new DataCollection();
            console.log(myData.fetch({}) );
        }
    });

    return AppVIew;
});

当我尝试打印获取的内容时，我得到以下内容和来自服务器的响应，在“responseText”键下，整个 JSON 不是 response.Summary

Object { readyState=1, setRequestHeader=function(), getAllResponseHeaders=function(), more...}

有人可以帮助解决我的这个问题。遇到了similar issue，但没有帮助。

任何帮助/建议将不胜感激，让我们走得更远。

【问题讨论】：

标签： javascript backbone.js model-view-controller

【解决方案1】：

fetch 返回一个 XHR 对象。您应该检查集合的数据，而不是 fetch 调用的返回值。

myData.fetch({
  success: function(collection, response, options) {
      console.log(collection.models);
  }
});

【讨论】：

【解决方案2】：

好的。当主干调用 Fetch 函数时，它从后面使用 Jquery(ajax)，这意味着 fetch 是异步的。要接收 Fetch 申请的结果，您可以使用类似的内容。

咖啡脚本代码。 //在你的模型里面结果 = @fetch()

Fetch 返回 jqXHR（很高兴了解您的请求），在这里您可以找到一些信息，例如请求的状态码等。

但是如果你想在请求后知道你的模型/集合的属性，你需要监听一个在主干完成获取请求后触发的事件。

//Inside your model
getResult:-> 
  @fetch(
     success:=>
        @trigger "success"
     error:=>
        @trigger "error"

)

//Inside your view
@model = new Model()
@model.getResult()
@model.on "succees", @doSomethingForSuccess, @
@model.on "error", @doSomethingForError, @


doSomethingForSuccess:->
 //implementation

doSomethingForError:->
 // implementation

现在您已使用服务器内容填充模型。如果您尝试在“doSomethingForSuccess”函数中使用console.log，您将看到内容信息。

Backbone 在与服务器通信时有一些默认触发事件。看看官方文档。 http://backbonejs.org/#Events

【讨论】：