дочерние коллекции не отображаются в представлении родительской модели в магистрали

Кажется, я не могу заставить шаблоны просмотра детей отображать. Они отображаются в журнале консоли, и они появляются нужное количество раз, но я не могу заставить их отображаться в браузере.

Цели — это родители, а шаги — дети.

БИТЫ КОДА:

модели:

$(function() {
    window.Goal = Backbone.Model.extend({
        defaults: {
        description: null
        },
        initialize: function() {
            this.steps = new Steps();
            this.steps.fetch({ reset: true });
            this.stepsAll = new StepsViewForGoals({ collection:this.steps });
            $('.all-steps').append(this.stepsAll.render().el);
        }
    });
    window.Goals = Backbone.Collection.extend({
        model: Goal,
        url: '/api/goals/'
    });
    window.goals = new Goals();
});

просмотры целей:

$(function() {
    window.GoalView = Backbone.View.extend({
        className: 'list-item',
        template: _.template($('#goal-item-template').html()),
        initialize: function() {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });
    window.GoalsView = Backbone.View.extend({
        el: '#app',
        template: _.template($('#goals-list-template').html()),
        initialize: function () {
            _.bindAll(this, 'render', 'addGoal');
            this.collection.bind('reset', this.render);
            this.collection.bind('change', this.render);
            this.collection.bind('add', this.render);
        },
        render: function() {
            this.$el.html(this.template());
            this.collection.each(function(goal) {
                var view = new GoalView({ model:goal });
                $('#goals').append(view.render().el);
            });
            return this;
        }
    });
});

пошаговые просмотры

$(function() {
    window.StepView = Backbone.View.extend({
        className: 'list-item',
        template: _.template($('#step-item-template').html()),
        initialize: function () {
            _.bindAll(this, 'render');
            this.model.bind('change', this.render);
        },
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            console.log('Individual step');
            return this;
        }
    });
    window.StepsViewForGoals = Backbone.View.extend({
        el: '.all-steps',
        template: _.template($('#step-list-template').html()),
        initialize: function () {
            _.bindAll(this, 'render');
            this.collection.bind('reset', this.render);
            this.collection.bind('change', this.render);
        },
        render: function() {
            this.$el.html(this.template());
            console.log(this.collection.toJSON());
            this.collection.each(function(step) {
                var view = new StepView({ model:step });
                $('.all-steps-list').append(view.render().el);
            });
            console.log('Steps View');
            return this;
        }
    });
});

Шаблон родительской модели:

{% verbatim %}

    <script id="goal-item-template" type="text/template">
        <h4><a class="controls-toggle"><%- description %></a></h4>
        <div class="controls">
            <a class="edit">
                <span class="ss-icon ss-pika edit-toggle">edit</span>
                <span class="ss-icon ss-pike save-toggle">save</span>
            </a>
            <a class="remove">
                <span class="ss-icon ss-pika">delete</span>
            </a>
        </div>
        <div class="edit-func">
            <div class="form-block">
                <textarea name="description"><%- description %></textarea>
            </div>
            <div class="all-steps"></div>
        </div>
    </script>

{% endverbatim %}

шаблон списка дочерних элементов

{% verbatim %}

    <script id="step-list-template" type="text/template">
        <h1 class="section-title">My Steps</h1>
        <div id="steps" class="all-steps-list"></div>
    </script>

{% endverbatim %}

Роутер для ясности:

$(function() {
    window.AppRouter = Backbone.Router.extend({
        routes: {
            'goals/': 'goals',
            'steps/': 'steps'
        },
        initialize: function() {
            // Goals
            this.goalsview = new GoalsView({
                collection: goals
            });
            goals.fetch({ reset:true });

            this.stepsview = new StepsView({
                collection: steps
            });
            steps.fetch({ reset:true });
        },
        goals: function () {
            $('#app').empty();
            $('#app').append(this.goalsview.render().el);
        },
        steps: function () {
            $('#app').empty();
            $('#app').append(this.stepsview.render().el);
        }
    });

    window.appRouter = new AppRouter();
    Backbone.history.start();
});