0

子ビュー テンプレートをレンダリングすることができないようです。それらはコンソール ログに表示されており、適切な回数表示されていますが、ブラウザーでレンダリングすることはできません。

目標は親であり、ステップは子供です。

コードビット:

モデル:

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

2 に答える 2

0

あなたのコードは不完全に見えるので、不足している部分を追加しました。次のコードを使用すると、ゴール ビューとステップ ビューがレンダリングされていることがわかります。あなたのコードが何か違うかどうか教えてください。

$(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();
})
于 2013-11-06T15:55:17.200 に答える