javascript - Backbone js : Not getting data from model while fetching data using rest api in collection

Question

 //Declare model
app.models.Items =Backbone.Model.extend({
    defaults: {
        id: '',
        name : ''
    }
});

//fetch data using collection
app.models.ItemsCollection = Backbone.Collection.extend({
    model: app.models.Items,
    url: urlprefix + id + "/items",
});

//Create Instance of Collection
app.models.ItemsModel = new app.models.ItemsCollection();
app.models.ItemsModel.fetch({
    async: false,
    // in success get response and add response in model
    success: function(response) {
        for (i = 0 ;i < response.models[0].attributes.elements.length;i++){
            app.models.ItemsModel.add(new app.models.Items(response.models[0].attributes.elements[i]));
        }
    },
    error: function (errorResponse) {
        console.log(errorResponse);
    }
});

在 Controller 中，我必须在我的模型中设置新属性，但我没有得到模型。在控制台中，我尝试使用 item.models[0] 来获取第一个模型，但它显示我未定义。

var item = new app.models.Items();

item.set("Id", 'TG');
item.set("name", 'Gokul');
item.save(null, {
    success: function(model, response){
        console.log("save");
    },
    error: function(error, response){
        console.log("Error: while saving Account data:" +JSON.stringify(error));
    }
});

我是 backbone.js 的新手，请帮助我。如果我在我的代码中做错了什么

Answer 1

这里有几个问题:

1. 在集合上调用 fetch 时没有 async: false 选项。当您调用 fetch() 时，将对服务器进行异步调用以获取结果。您不希望您的浏览器在发生这种情况时挂起。

2. 您不需要设置集合中的各个模型。假设您的 REST 端点正在返回有效的 JSON，Backbone 会为您做这件事。

   我会去掉您的成功方法中的 for 循环。你不需要那样做。

   如有必要，您可以覆盖模型定义中的解析选项，以处理每个模型响应的自定义处理。

3. 您还想在模型定义上设置 urlRoot，以便您可以像以前一样在集合外部使用模型。

4. 最后，您的集合中的 url 属性似乎设置不正确。你不希望那里有 id。

总而言之，您的代码应如下所示:

app.models.Items =Backbone.Model.extend({
    urlRoot: urlprefix + '/items',

    defaults: {
        id: '',
        name : ''
     },

    parse: function(response, options) {
        //your custom code here if necessary
    }
});

app.models.ItemsCollection = Backbone.Collection.extend({
    model: app.models.Items,
    url: urlprefix + "/items",
});

就是这样。然后您可以创建一个集合并获取当前项目:

var items = new app.models.ItemsCollection();
items.fetch();

但请记住，fetch() 是一种异步方法。您必须等待结果从服务器返回，然后才能期待集合中的任何项目。这就是成功选项的用途。

而且，您现在可以像以前一样独立创建一个项目，现在模型上设置了 urlRoot，它应该正确保存到您的服务器。

// Not sure you want to be setting the ID here in case you want it to 
// be set on the server when it is persisted
var item = new app.models.Item({
    "name": "Gokul"
});
item.save();

然后您可以手动将项目添加到您的收藏中:

items.add(item);

或者您可以再次获取项目，它现在应该在那里:

items.fetch();

请再次记住，fetch() 只有在您首先等待项目(异步)保存到服务器时才会起作用。

祝你好运!