Backbone utilisant js externe

Question

Bonjour à tous j'ai un site développé dans cakephp et j'intégrerais backbone dessus.
Pour ma portée j'utiliserais js externe pour backbone pour réutiliser le code.
J'ai écrit quelques lignes mais je ne peux pas ajouter de résultats sur mon élément.
J'ai essayé d'imprimer le « el » dans ce mode:

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

Mais rien que je ne peux pas entrer dans el pour faire un simple append!
Le conteneur # de résultats de recherche existent déjà
Ceci est mon point de vue principal:

<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> 

Et ceci est mon js externe avec épine dorsale

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

Est-ce quelque chose de changement?

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

Je pense que backbone peut accepter à la fois jQuery enveloppé ou d'un objet non enveloppé et bien, mais je ne sais pas quelle version Backbone que vous utilisez, voir si cela fonctionne

EDIT: A partir de backbone 1.0 sources , il semble épine dorsale peut en effet prendre soit un objet enveloppé jQuery ou un élément dom régulier, il devrait encore travailler

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

avez-vous quelque chose en ligne (jsFiddle?) Je serai heureux de jeter un oeil, mais this.$el devrais travailler et être égal à $("#search-results") de votre code en un coup d'œil.

Avez-vous essayé d'utiliser ProductView.setElement($("#search-results")) à la place? ça devrait être pareil, mais ça vaut le coup d'essayer aussi.