Как правильно спроектировать класс?

Question

[Blunker]

class CategoryManager {
    constructor() {
        this.currentCounter = $('.category-card').length + 1;
    }
    render(categoryBlock) {
        this.categoryHtml = categoryBlock;
        $(".categories-content").append(this.categoryHtml);
        this.currentCounter = $('.category-card').length;
    }
    getCounter() {
        return this.currentCounter;
    }
    addSubcategory() {
        $('.category-card__subblock-' + this.getCounter()).append(addSubCategory());
        console.log(this.getCounter());
    }
}

Есть такой класс
Использую его так:

$(".addCategory").click(function() {
        let category = new CategoryManager();
        $.ajax({
            url: '/ctvs/manageCategory/renderCategories',
            type: 'POST',
            dateType: 'json',
            data: {id: category.getCounter()},
            success: function(data) {
                category.render(data['response']);
                $(".categories-content").on('click', '.addSubCategory', function() {
                    category.addSubcategory();
                });

                console.log(category);
            }
        });
    });

Суть в том, что с сервера приходит html код, я его пишу в блоки. Но при создании блока в этом блоке начинается каша. Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные.
Подскажите, что не так.

Answer 1

[Зелимхан Бельтоев]

Новые блоки создаются во всех уже сгенерированных. Хотя объекты же разные.

У вас главная проблема в том, что каждый экземпляр класса CategoryManager воздействует на все блоки, а не только на свой блок.

Правильным решением в этом случае будет держать в классе поле, например, rootElement, и в конструктор передавать блок, к которому CategoryManager привязан, а класс уже переписать в следующем виде:

class CategoryManager {
    constructor(rootElement) {
        this.rootElement= rootElement;
        this.currentCounter = this.rootElement.find('.category-card').length + 1;
    }
    render(categoryBlock) {
        this.categoryHtml = categoryBlock;
        this.rootElement.find(".categories-content").append(this.categoryHtml);
        this.currentCounter = this.rootElement.find('.category-card').length;
    }
    getCounter() {
        return this.currentCounter;
    }
    addSubcategory() {
        this.rootElement.find('.category-card__subblock-' + this.getCounter()).append(addSubCategory());
        console.log(this.getCounter());
    }
}

В итоге, каждый экземпляр класса CategoryManager будет воздействовать только на свой блок, а не на все блоки страницы

Answer 2

[Dark Hole]

Вот ошибка:

$(".categories-content").on('click', '.addSubCategory', function() {
  category.addSubcategory();
});

Вы вешаете на клик на один и тот же блок(и) все addSubCategory.
P.S. Без живого примера трудно найти ошибку

Comments

[Blunker]

Спасибо

Answer 3

[M-ka]

отказаться от идеи с классом в яваскрипте и будет правильным решением

Comments

[Blunker]

А что нибудь по вопросу есть?

[M-ka]

Blunker: это и было по вопросу, можно было бы и погуглить... js class Если говорят, что не следует их использовать, значит нужно погуглить из-за чего так говорят... а не трепаться без дела