Render model view in collection view does not not know it is element?

Question

Будучи новым для Backbone.js, я пытаюсь разработать СПА, в том числе, «Разработка приложений Backbone.js» Адди Османи. Это упражнение 2 (http://addyosmani.github.io/backbone-fundamentals/#exercise-2-book-library---your-first-restful-backbone.js-app) показывает, как использовать представление коллекции для визуализации представлений внутренней модели из каждого объекта коллекции. Тем не менее, представление коллекции в этом примере не связано с собственной разметкой html. Таким образом, модели коллекции связаны с элементом DOM коллекции (здесь: «#books»). Я хочу использовать собственный шаблон, чтобы сначала визуализировать элементы html моего представления коллекции, скажем, простой div с id = «the-plan». Проблема заключается в том, что «# the.plan» не распознается из внутренних представлений модели как атрибут элемента. Следовательно, внутренние взгляды вообще не отображаются. Сообщение об ошибке отсутствует, и все console.logs работают. Код выглядит примерно так:

app.PlanItemView = Backbone.View.extend({ 
    className: "plan-item", 
    template: _.template($("#plan-item-view-template").html()), 

    render: function(){ 
    console.log("Rendering plan item view..."); 
    this.$el.append(this.template(this.model.toJSON())); 
    return this; 
    } 
}); 

app.PlanView = Backbone.View.extend({ 
    el: ".main-panel", 
    id: "#the-plan", 
    template: _.template($("#plan-view-template").html()), 

    initialize: function(initialPlanItems){ 
    console.log("Plan View initialized... Selector: " + this.id); 
    console.log("Incoming initial plan item data: " + _.first(_.values(_.first(initialPlanItems)))); 
    this.collection = new app.MealPlan(initialPlanItems); 
    this.render(); 
    }, 

    // render plan by rendering each item in its collection 
    render: function() { 

    this.$el.append(this.template({ 
     "myPlan": this.collection.each(function(item){ 
     this.renderPlanItem(item); 
    }, this) 
    })); 

    return this; 
    }, 

    // render a plan item by creating a PlanItemView and appending the 
    // element it renders to the plan's id-element ('#the-plan') 
    renderDish: function(item){ 
     var planItemView = new app.PlanItemView({ 
      model: item, 
      el: this.id 
     }); 
     this.$("#the-plan").append(planItemView.render()); 
    } 
}); 

... 

var planView = new app.PlanView(test_plan_items); 

Что здесь не так?

Answer 1

Изменение функции воздавать:

render: function() { 

    this.$el.append(this.template({ 
     "myPlan": this.collection 
    })); 

    this.collection.each(function(item){ 
     this.renderPlanItem(item); 
    }, this); 

    return this; 
} 

И изменить renderDish на:

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