Backbone LocalStorage Модели и Коллекции

Question

Я использую Backbone и плагин Backbone LocalStorage:

https://github.com/jeromegn/Backbone.localStorage

Кажется, у меня возникают некоторые проблемы с сохранением моделей в коллекции, поэтому я решил использовать коллекцию для сохранения своих данных, но теперь мне кажется, что я не могу использовать методы плагинов для удаления записи. Вот пример:

Я добавляю в локальное хранилище, где это находится в моей расширенной коллекции Backbone

this.localStorage.create({id: nextPoint, date_stamped: new Date()});

Обратите внимание, что во всей прочитанной мной документации не упоминается ключ "localStorage", который мне нужно было использовать здесь.

Далее я попытался удалить этот ключ:

var previousRecord = this.localStorage.find({id:currentPoints});
this.localStorage.destroy(previousRecord);

Который возвращает ошибку:

TypeError: Cannot call method 'isNew' of null

Вот модель

var PointModel = Backbone.Model.extend({
    localStorage: new Backbone.LocalStorage("Points"),
    defaults: {
        date_stamped: new Date()
    },
    /*initialize: function() {
        if(typeof this.id != 'number') {
            this.id = 11;
            this.date_stamped = new Date();
        }
    }*/
});

Вот коллекция

var PointsCollection = Backbone.Model.extend({
        model: PointModel,
        localStorage: new Backbone.LocalStorage("Points"),

        initialize: function() {
            this.pointsCard = this.createPointsCard();
        },

        // Public Methods
        getCurrentPoints: function() {
            return this.localStorage.records.length;
        }, 
        addPoint: function() {
            // get the current amount of points
            var currentPoints = this.getCurrentPoints(),
            nextPoint = currentPoints+1;
            if(nextPoint > _c.totalPoints) {
                return alert('Display error, reached limit');
            }
            // create 
            this.localStorage.create({id: nextPoint, date_stamped: new Date()});
        },
        removePoint: function() {
            // this may not work for the animation


            // maybe need to rethink this and add custom function to remove local
            // storage value
            var _this = this;
            // bit of a weird way to do this, but Backbone localStorage plugin didn't
            // seem to remove records very easily.
            var currentPoints = this.getCurrentPoints();
            // first clear all
            this.localStorage._clear();
            // then re add the original amount
            var range = _.range(1,currentPoints);
            _.each(range, function() {
                _this.addPoint()
            });


            // should work this way
            /*
            var currentPoints = this.localStorage.records.length,
            previousRecord = this.localStorage.find({id:currentPoints});
            this.localStorage.destroy(previousRecord);
            */
        },
        removeAllPoints: function() {
            this.localStorage._clear();
        },

        /*
            createPointsCard takes values from the config to
            make an array which has each point and its status for example:
            {
                id: [1-9],
                reward: string(rewardTitle) | false
                stamped: true | false
            }
        */
        createPointsCard: function() {
            var _this = this;
            // first create an array to hold the maximum number of points
            var range = _.range(1, _c.totalPoints+1),
            points = [];

            _.each(range, function(point) {
                var reward = _this._comparePointsNumberToReward(point);
                points[point] = {
                    id: point,
                    reward: reward,
                    stamped: true
                }
            });
            console.log(points)
            return points;
        },

        // Private Methods
        /*
            loop through each reward and then check if the current 
            point has a reward.
            return string(title) | false
        */
        _comparePointsNumberToReward: function(point) {
            var hasReward = false;
            _.each(_c.rewards, function(reward) {
                if(reward.pointsRequired === point) {
                    hasReward = reward.title;
                }
            });
            return hasReward
        }

    });

    return PointsCollection;
});

Answer 1

Backbone.LocalStorage плагин заменяет Backbone.sync или глобально или на коллекции sync метод с store.jsX-браузерная реализация LocalStorage. Он также работает ТОЛЬКО на коллекциях, а не на моделях. Вам не нужно создавать какие-либо методы CRUD для взаимодействия с LocalStorage, так как плагин использует собственные сохранения, выборки и т. Д.

С учетом сказанного, я думаю, что ваша основная ошибка заключается в следующем: коллекции должны расширяться Backbone.Collectionне Backbone.Model

var PointsCollection = Backbone.Model.extend({});
// Should be
var PointsCollection = Backbone.Collection.extend({});

Поскольку вы используете модели, плагин LocalStorage не используется должным образом (он работает ТОЛЬКО в коллекциях), и, следовательно, вам нужно углубиться в цепочку прототипов, чтобы получить доступ к объекту LocalStorage.