parse in model for nested collection stopped working client-side - rendr-handlebars 0.2.1

[crwang]

@saponifi3d

I've been a bit behind and I'm just getting to upgrading to the latest version of Rendr v1.0.3, and after some serious debugging, I've found that the forced upgrade to rendr-handlebars has caused my code to stop functioning properly.

I am doing something similar to what you have here #372, which is related to #263

    parse: function(data) {
        data.products = this.app.modelUtils.getCollection('Products', data.featuredProducts, {
            app: this.app
        });
        return data;
    }

and then in my template I have the collection of products

    {{view "products/list" collection=products }}

Now what is happening is on the server load, it's fine, but on the client load, it's not showing the correct products, but a cached version from the collection store.

If I revert the rendr-handlebars to 0.2.0 it seems to actually work, but obviously, it'd be great to move forward.

Do you have any thoughts on why this may be happening?

[saponifi3d]

From what it looks like you're not setting params on the collection so in the store you're overriding the Products:{} collection, maybe simply adding a params with a unique identifier would solve the problem? The collection store uses the params for the collection to define it's unique-ness since it doesn't have a single id like a model.

For more info on params checkout: http://rendrjs.github.io/collection/#params For collection store: http://rendrjs.github.io/collection-store/

[crwang]

Hi @saponifi3d thanks for the feedback.

Yes, I actually do have params in my actual code. Here's what I have in my normal code trying to solve this (sorry I pruned it for the example):

parse: function(data) {
        if (_.isObject(data.featuredProducts)) {
            data.products = this.app.modelUtils.getCollection('Products', data.featuredProducts, {
                app: this.app,
                departmentId: data.id,
                type: 'featured'
            });
        }
        return data;
    }

But, you're right that I am getting the Products:{} collection.

Again it works server side. If you have any other thoughts on how this could be happening or the best way to debug it, that'd be great. Again, I have pinpointed that it relates to the rendr-handlebars v0.2.1 updates, but what scares me is those were a fix for the duplicate views, which means if that code is correct there may be other weird bugs floating around.

[saponifi3d]

Hrrm - which version of render-handlebars are you using now? latest is 1.0.1.

Also, to set the params value it has to be wrapped in a params object - so...

parse: function(data) {
        if (_.isObject(data.featuredProducts)) {
            data.products = this.app.modelUtils.getCollection('Products', data.featuredProducts, {
                app: this.app,
                params: {
                  departmentId: data.id,
                  type: 'featured'
                }
            });
        }
        return data;
    }

not sure why it would work in an older version of rendr-handlebars though... that's special. my only thought there is that it's setting the data-{variable} attributes when it creates the view? I'm def doing this exact use case a number of times without issue, so i'm not quite sure where it's going wrong :(

[crwang]

Wow, thanks a lot, it was that my params wasn't specified correctly. I'm so relieved both that it was a bug on my side and that you helped me find it!

Thanks again!

[crwang]

One other thing I was thinking, is there a way we can add to the wiki here?

There are a lot of little things like this that if it was documented somewhere official it may save a lot of time for developers and also draw more people to adopt the framework.

I added something here where I've been documenting some of the ways we have been using Rendr.

https://github.com/crwang/rendr-conventions/wiki/Converting-nested-JSON-data-into-models-or-collections