Precompiled Handlebar Template not render

Question

I have my View:

var ProductsView = Backbone.View.extend({

    initialize: function(){
        var that = this;
        this.collection.fetch({
            success: function()
                {
                    console.log("fetcheo");
                    that.render();
                }
        });

        this.listenTo(this.collection, "reset", this.render);
    },

    render: function(){

        var cats = [];
        this.collection.each(function(model)
                            {
                                cats.push(model.get('familia'));
                            });
        this.cats = _.uniq(cats, false);
            console.log(this.cats) // It returns ["VINOS", "CERVEZA", "BOTANA"]
        this.$el.html(Handlebars.templates.products(this.cats));
        return this;
    }
});

And this is the precompiled Handlebar template:

<h1>Y LOS MODELOS SON</h1>
<ul>
{{#each cats}}
<li>
{{this}}
</li>
{{/each}}
</ul>

But it doesn't rendered the this.cats array; It's not a collection issue() i already fixed an early problem with that. Thanks for the help...

Answer 1

You just need to wrap the object in a "cats" property:

this.cats = { cats: _.uniq(cats, false) }

Note that when you use {{#each cats}} , the renderer will look for a property named "cats". Your variable name is "cats", but the renderer doesn't see that at all.

Fiddle demo