Backbone using external js

Question

Hi all I have a site developed in cakephp and I would to integrate backbone on it.
For my scope I would to use external js for backbone to reuse the code.
I have write some lines but I can't append results on my element.
I have tried to print the "el" in this modes:

console.log($(this.el));
console.log(this.el);
console.log(this.$el);

But nothing I can't enter into el to make a simple append!
The container #search-results already exist
This is my main view:

<script type="text/javascript">

var search = {};
search.product = {};
search.product.template = "#results-product-template";
search.product.container = "#search-results";
search.product.defaults = {
    id:0,
    type:"product",
};

$(function(){
    var ProductList = new Search.Collections.Products();

    var ProductView = new Search.Views.Product({
        // new Search.Collections.Products();
        collection:ProductList
        ,el:$("#search-results")
    });

    function parseResults () {
                var json = {
                //my data
                }
        for (var i = json.products.length - 1; i >= 0; i--) {
            ProductList.add([new Search.Models.Product(json.products[i])]);
        };

        updateResults();
    }

    function updateResults () {
        console.log('updateResults: Ritorno il risultato quando hunter riceve una risposta dal server');
        if ($('#search-results').length == 0) {
            $('div.main > section:first-child').before('<section id="search-results"> <ul id="product-results"> <li>Contenuto</li> </ul> </section>');
        }
        ProductView.render();
    }

    // search
    $('#search-results .close').on('click', function () {
        $('#search-results').animate({height:0}, 500, function () {
            $(this).remove();   
        })
    });


});
</script>

And this is my external js with backbone

var Search = {
    Models: {},
    Collections: {},
    Views: {},
    Templates:{}
}

Search.Models.Product = Backbone.Model.extend({
    defaults: search.product.defaults || {},
    toUrl:function (url) {
        return url.replace(" ", "-").toLowerCase();
    },
    initialize:function () {
        console.log("initialize Search.Models.Product");
        this.on("change", function (){
            console.log("chiamato evento change del Model Search.Models.Product");
        });
        this.on("change:text", function () {
            console.log("chiamato evento change:text del Model Search.Models.Product");
        });
    }
});

Search.Collections.Products = Backbone.Collection.extend({
    model: Search.Models.Product,
    initialize:function () {
        console.log("initialize Search.Collections.Products");
        console.log(this);
        console.log(this.length);
        console.log(this.models);
    }
});

Search.Views.Product = Backbone.View.extend({
    initialize:function () {
        console.log("initialize Search.Views.Product");
        console.log($(search.product.template).html());

    },
    template:function (data) {
        if (data == null) {
            data = this.collection.toJSON(); 
        }
        var template = Handlebars.compile($(search.product.template).html());
        template(data);
    },
    render:function () {
        console.log($(this.el));
            $(this.el.append("TEST"));
            //HERE IS THE PROBLEM
            // I have tried this.$el.append("TEST");
        return this;
    }
});

Answer 1

Does this change anything?

var ProductView = new Search.Views.Product({
    // new Search.Collections.Products();
    collection:ProductList,
    el:$("#search-results")[0]
});

I think backbone can accept both jQuery wrapped or not wrapped object and be fine, but I don't know what Backbone version you are using, see if this works

EDIT: From backbone 1.0 sources, it seems backbone can indeed take either a jQuery wrapped object or a regular dom element, it should still work

this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);

Do you have something online (JSFiddle?) I will be happy to take a look, but this.$el should work and be equal to $("#search-results") from your code in a quick glance.

Have you tried using ProductView.setElement($("#search-results")) instead? it should be the same, but worth a try as well.