Question

So I am trying storing product types from a json file before trying to add them to a collection but am getting some strange results (as in I dont fully understand)

on my router page i setup a variable for cached products as well as product types

cachedProductTypes: null,
productType : {}, 
products : {},  

getProductTypes:
        function(callback)
        {
            if (this.cachedProductTypes !== null) {
                return callback(cachedProductTypes);
            }

            var self = this;

            $.getJSON('data/product.json',
                function(data)
                {
                    self.cachedProductTypes = data;
                    callback(data);
                }
            );
        },

parseResponse : function(data) {


          result = { prodTypes: [], products: [] };

          var type;
          var types = data.data.productTypeList;
          var product;
          var i = types.length;


         while (type = types[--i]) {
            result.prodTypes.push({ 
               id: type.id,
               name: type.name,
               longName: type.longName
               // etc.
            });
            while (product = type.productList.pop()) {
              product.productTypeId = type.id,
              result.products.push(product);
            }   
          };

          this.productType = result.prodTypes;
          console.log( "dan");
          this.products = result.products;      
    },
showProductTypes:function(){
        var self = this;

        this.getProductTypes(
            function(data)
            {
                self.parseResponse(data);

     var productTypesArray = self.productType;
     var productList=new ProductsType(productTypesArray);   
     var productListView=new ProductListView({collection:productList});

     productListView.bind('renderCompleted:ProductsType',self.changePage,self); 
     productListView.update();
    }
        );      
    }

when a user goes to the show product types page it runs the showProductsType function

So I am passing the products type array to my collection

on the collection page

      var ProductsType=Backbone.Collection.extend({

      model:ProductType,

      fetch:function(){
        var self=this;
        var tmpItem;
        //fetch the data using ajax



        $.each(this.productTypesArray, function(i,prodType){

            tmpItem=new ProductType({id:prodType.id, name:prodType.name,    longName:prodType.longName});
            console.log(prodType.name);
            self.add(tmpItem);
        });

        self.trigger("fetchCompleted:ProductsType");

      }
}); 
return ProductsType;

now this doesnt work as it this.productTypesArray is undefined if i console.log it.
(how am I supposed to get this?)

I would have thought I need to go through and add each new ProductType.

the strange bit – if I just have the code

    var ProductsType=Backbone.Collection.extend({

      model:ProductType,

      fetch:function(){
        var self=this;
        var tmpItem;
        //fetch the data using ajax


        self.trigger("fetchCompleted:ProductsType");

      }
});


return ProductsType;

it actually adds the products to the collection? I guess this means I can just pass an array to the collection and do not have to add each productType?

Answer 1

I guess this means I can just pass an array to the collection and do not have to add each productType?

Yes, you can pass an array to the collection’s constructor, and it will create the models for you.

As far as your caching code, it looks like the problem is here:

if (this.cachedProductTypes !== null) {
    return callback(cachedProductTypes);
}

The callback statement’s argument is missing this – should be return callback(this.cachedProductTypes).