javascript - Render model view within collection view doesn not know it's element? -

backbone. Being new to JS, I try to develop the SPA, among others, Eddie Osmani's "Developing Backbone.JS Application" This drill shows 2 () how to use the collection scene to present the internal model view from each model of the collection object. However, in this example, the collection scene does not come with its own HTML markup. Thus, the models of the collection are associated with the DOM element (here: '#books') of the collection of the collection. I want to use my own template to present HTML elements of my collection scene first, say, a simple div with id = "the-plan". The problem is, the "# the.plan" element is not recognized as the internal model views. Therefore, inner ideas have not been given at all. There are no error messages and all console.logs are working. Code looks like this:

  App Panel Icons = Backbone View. Extension ({classname: "plan-item", template: _.template ($ ("# plan-item-view - template") .HTML ()), render: function () {console.log ("Rendering scheme item Scene ... "); $ el.append (this.template (this.model.toJSON ()); Return;}}); App.PlanView = Backbone.View.extend ({el: ". -main-panel", id: "# the-plan", Template: _.template ($ ("# plan-view-template"). Html ( ), Initialize: function (initialPlanItems) {console.log ("scheme view started ... selector:" + this.id); console.log ("initial plan item data:" + _.first (_. Value (_.first (initialPlanItems))); this.collection = new app.MealPlan (initialPlanItems); this.render ();}, // Render each item in its collection render: submit the scheme: function () {This. $ El.append ({"myPlan": this.collection.each (function (item) {this.renderPlanItem (item);}, this)})); It returns the id-element ('# scheme') of the scheme by returning it;}, // Submitting a plan item, making a plan itemmive and adding // element: function (item) {var planItemView = new app. PlanItemView ({Model: Item, L: IT ID}); $ ("# The-plan"). Attachment (planItemView.render ()); }}); ... var planView = new app Panelview (test_plan_items);  

What's wrong here?

Change the render function to:

  Render: function () {This. $ El.append (this.template ({"myPlan": this.collection})); This.collection.each (function (item) {this.renderPlanItem (item);}, this); This return; }  

and renderDish :

  renderPlanItem: function (item) {var planItemView = new app.PlanItemView ({ Model: item, L: this.id}); PlanItemView.render (); }