Question

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

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的方式完成这个。

Answer 1

原因是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中的原型以及它们如何用于实现面向对象的范例。

呈现相同类型的子视图的骨干视图会导致无限循环

1 个答案: