I'm encountering an issue with collection.get and model.get methods returning undefined values.
Here is my initialization code:
initialize: function () {
this.collection = new productsCollection();
this.model = new productModel();
}
And here is my rendering code:
this.collection.fetch({
success: function (product) {
console.log(product);
$(that.el).html(_.template(productListTemplate, { products: product.models, _: _ }));
}
});
The list of products displays fine. When I click on each product, a popup appears where the name can be changed.
I want to set a new name in the model and trigger save, but I am unable to get the model of the product. Here is the related code:
$("#productName").val($(e.currentTarget).html());
var ID = $(e.currentTarget).data("id");
var item = this.collection.get(ID);
console.log("start..........");
console.log(item);
console.log(ID)
console.log(this.model.get(item));
console.log("end..........");
$('.modal').modal('toggle');
I can see the correct id in the console, but not the collections and models. Can someone please help me out? Thank you in advance.
UPDATE: Here is the complete view code:
function ($, _, Backbone, popupModal, productTab, productsCollection, productListTemplate, productModel) {
// View implementation
}
UPDATE: Responses
this.collection
// Output describing the collection
this.model
// Output describing the model attributes
this
// Detailed output of current context
UPDATE: Expanded collection details
// Detailed information about the collection contents