JavaScript: Backbone.js填充模型集合

Question

以下是我目前的进展：

var Item = Backbone.Model.extend({
    defaults: {
        id: 0,
        pid: 0,
        t: null,
        c: null
    },
    idAttribute: 'RootNode_', // what should this be ???
    url: 'page.php'
});

var ItemList = Backbone.Collection.extend({
    model: Item,
    url: 'page.php',
    parse: function(data) {
        alert(JSON.stringify(data)); // returns a list of json objects, but does nothing with them ???
    }
});

var ItemView = Backbone.View.extend({
    initialize: function() {
        this.list = new ItemList();
        this.list.bind('all', this.render, this);
        this.list.fetch();
    },
    render: function() {
        // access this.list ???
    }
});

var view = new ItemView();

当前（预期）的JSON响应：

{
    "RootElem_0":{"Id":1,"Pid":1,"T":"Test","C":"Blue"},
    "RootElem_1":{"Id":2,"Pid":1,"T":"Test","C":"Red"},
    "RootElem_2":{"Id":3,"Pid":1,"T":"Test2","C":"Money"}
}

这段代码可以成功地调用page.php，后端根据$_SERVER['REQUEST_METHOD']执行并返回所需的信息，但我不知道为什么集合没有被填充。

在ItemList的parse函数中，它正确地显示了所有输出，但它对此无动于衷。

我在代码中留下了一些注释以获得更精确的问题，但主要问题是为什么集合不会填充已经接收到的数据？

- Nahydrin

---

你在代码中创建了一个新的ItemList吗？你还想为你的视图设置模型，以便它实际上与你的ItemList连接起来。 - kinakuta

我在ItemView的initialize函数中创建并获取了ItemList的实例。至于视图中的模型，这并不是使其工作所必需的。 - Nahydrin

啊，我没看到你在视图中实例化了模型 - 所以你的ajax调用返回了一个响应，但是你的集合里没有任何东西？ - kinakuta

没错。当执行 this.list.fetch() 这行代码时，ajax 调用完成后会调用 parse 方法，且 data 参数包含一个有效的 json 对象。但是，集合并未用它收到的响应填充。 - Nahydrin

JSON 不是有效的。删除最后一个“，”。 - czerasz

在复制到这里时出现了一个打字错误。 - Nahydrin

Answer 1

将你的parse方法修改为：

parse: function(response){
   var parsed = [];
   for(var key in response){
      parsed.push(response[key]);
   }
   return parsed;
}

为了遵循惯例，在ItemView中将list更改为model。在render()中也是如此：

render: function() {
    var template = _.template("<div>some template</div>");
    this.model.each(function(item){ 
        this.$el.append(template(item.toJSON()));
    }, this);
    return this;
}

- driangle

---

我已经在这里忙活了一整天，而你却突然出现了一个我一直在寻找的优雅解决方案。先生，你是我的救星。谢谢！ - Nahydrin

你能否给我一个例子，展示一下在我的 OP 中有了 4 个默认字段后，template 会是什么样子？如果可以的话，我将非常感激。 :) - Nahydrin

<div><span><%= Id %></span><span><%= Pid %></span><span><%= T %></span><span><%= C %></span>。请查看文档。 - driangle

Answer 2

你应该在完成必要的解析后返回数据的解析方法。

解析的常见用例是，如果你要发送一个类似于以下形式的对象：

{ "id" : "NaN", "tasks": [ *all your models in a list here *] }

那么你可以这样使用解析：

parse: function (data) {
    return data.tasks
}

Backbone就会处理剩下的部分。

你为什么要以那种字典格式发送数据呢？不太清楚你打算如何将其映射到集合中的每个模型。键是无关紧要的吗？如果是，那么你应该传回值中对象的列表。(但请参见底部注释) 如果不是，并且你想把它附加到模型上，那么它应该移动到用作值的对象上并发送回一个列表。

* 注意：不要直接发送JSON列表。存在一种基于列表本身有效的javascript的GET请求漏洞，恶意站点可以使用Array对象并覆盖它以使用脚本标记来调用API从而使用用户凭证来提取在该调用中可用的任何信息。相反，当想要返回列表时，应使用类似于这样的东西：

{ result: [*list here*] }

然后你只需要使用上面的解析方法来提取列表。

- Jeff Bain