javascript - 呈现相同类型 subview 的主干 View 会导致无限循环

我有一个通过子代码具有子类别模型的类别模型（工作正常）：

var ImageSetCategory = Backbone.Model.extend({

        childrenCategories : new Array(),

        initialize: function () {
            var self = this;

            if (this.has('childrenCategories')) {

                $.each(this.get('childrenCategories'), function () {

                    var category = new ImageSetCategory(this);

                    self.childrenCategories.push(category);
                });
            }
        }
    });

我也有一个使用此模型并呈现所有子类别的视图。 （基本上，我正在尝试创建树视图）它使用jquery遍历子类别，实例化其自身的新版本，并将每个子类别作为模型，然后进行渲染。但是我遇到了一个无尽的循环，不断地尝试处理同一模型。

var ImageSetCategoryView = Backbone.View.extend({

        tagName: 'li',

        className: 'nested-category',

        template: Handlebars.templates.imageSetCategoryView,

        render: function() {
            var self = this;

            var templateHtml = this.template(this.model.toJSON());

            self.$el.html(templateHtml);

            // *****************************
            // ENDLESS LOOP
            //   this is always the same model from the array
            // *****************************
            $.each(self.model.childrenCategories, function () {
                var categoryView = new ImageSetCategoryView({ model: this });

                self.$el.children('ul').append(categoryView.render().el);
            });

            return this;
        },
    });

为什么这会导致无限循环？我没有遵循最佳做法吗？我的背景是C＃，所以我试图以一种OOP的方式来实现这一目标。

最佳答案

原因是ImageSetCategory的所有实例共享相同的childrenCategories数组。这样，在ImageSetCategory.initialize函数中，您可以创建循环引用（ImageSetCategory.childrenCategories指向数组，而ImageSetCategory.childrenCategories[0]指向ImageSetCategory本身）。这使得$.each中的ImageSetCategoryView.render遍历同一模型。为了避免这种情况，您应该在ImageSetCategory.initialize函数内部初始化数组：

var ImageSetCategory = Backbone.Model.extend({

    initialize: function () {
        var self = this;

        this.childrenCategories = [];

        if (this.has('childrenCategories')) {

            $.each(this.get('childrenCategories'), function () {

                var category = new ImageSetCategory(this);

                self.childrenCategories.push(category);
            });
        }
    }
});

要了解有关发生这种情况的更多信息，请阅读JavaScript中的原型以及如何将其用于实现面向对象的范例。