backbone.js - 子集合未在主干的父模型视图中呈现

Question

我似乎无法让子视图模板呈现。它们出现在控制台日志中，并且出现了正确的次数，但我无法让它们在浏览器中呈现。

目标是父母，步骤是孩子。

代码位：

楷模：

$(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();
});

Answer 1

您的代码看起来不完整，所以只是添加了缺失的部分。使用以下代码，我可以看到正在呈现的目标和步骤视图。让我知道您的代码是否有所不同。

$(function () {

    window.Step = Backbone.Model.extend({
    })

    window.Steps = Backbone.Collection.extend({
        model:window.Step,
        url: 'data/steps.json'
    })

    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: 'data/goals.json'
    });

    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');
            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;
        }
    });
});


$(function () {
    var view = new window.GoalsView({
        collection:window.goals
    });
    view.render();
    window.goals.fetch();
})

Answer 2

我找到了。

问题是从哪里调用渲染。

它必须在您的孩子出现的地方的家长视图中进行。我在初始化函数中完成了这一切，但这只是将渲染调用放入仍在内存中的视图中。一旦我将渲染器移出 model.initialize 并进入 parent.view.render 它就起作用了。