Backbone.js: изменение не срабатывает на model.change ()

Question

Я сталкиваюсь с проблемой "событие не запускается" на Backbone.js = /

Вот мой взгляд на модель пользователя:

    window.UserView = Backbone.View.extend({

        ...

        initialize: function()
        {
            this.model.on('destroy', this.remove, this);

            this.model.on('change', function()
            {
               console.log('foo');
            });
        },

        render: function(selected)
        {
            var view = this.template(this.model.toJSON());

            $(this.el).html(view);

            return this;
        },

        transfer: function(e)
        {                
            var cas = listofcas;

            var transferTo = Users.getByCid('c1');
            var transferToCas = transferTo.get('cas');

            this.model.set('cas', cas);
            console.log('current model');
            console.log(this.model);

            //this.model.change();
            this.model.trigger("change:cas");
            console.log('trigger change');

            transferTo.set('cas', transferToCas);
            console.log('transferto model');
            console.log(transferTo);

            //transferTo.change();
            transferTo.trigger("change:cas");
            console.log('trigger change');

        }

    });

Здесь модель пользователя:

window.User = Backbone.Model.extend({

        urlRoot: $('#pilote-manager-app').attr('data-src'),

        initialize: function()
        {
            this.set('rand', 1);
            this.set('specialite', this.get('sfGuardUser').specialite);
            this.set('name', this.get('sfGuardUser').first_name + ' ' + this.get('sfGuardUser').last_name);
            this.set('userid', this.get('sfGuardUser').id);
            this.set('avatarsrc', this.get('sfGuardUser').avatarsrc);
            this.set('cas', new Array());

            if (undefined != this.get('sfGuardUser').SignalisationBouclePorteur) {

                var cas = new Array();

                _.each(this.get('sfGuardUser').SignalisationBouclePorteur, function(value)
                {
                    cas.push(value.Signalisation);
                });

                this.set('cas', cas);

            }
        }
    });

В пользовательской модели есть атрибут "cas", который представляет собой массив объектов.

В других темах я читал, что события изменения не запускаются в model.set, если атрибуты не являются значениями.

Итак, я пытаюсь напрямую вызвать событие change с помощью метода model.change (). Но в моей консоли нет лога "foo" ...

Answer 1

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

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

Вопрос 1

Вопрос 2

Основная причина связана с понятием ссылкиравенство против множества / членства.Похоже, что в значительной степени равенство ссылок является одним из основных методов, используемых магистралью для определения того, когда атрибут изменился.

Я считаю, что если я использую методы, которые генерируют новую ссылку, такую ​​как Array.slice () или _.clone (), событие изменения распознается.

Так, например, следующий код не вызывает событие, потому что я изменяю ту же ссылку на массив:

this.collection.each(function (caseFileModel) {
    var labelArray = caseFileModel.get("labels");
    labelArray.push({ Key: 1, DisplayValue: messageData });
    caseFileModel.set({ "labels": labelArray });
});

Хотя этот код вызывает событие:

this.collection.each(function (caseFileModel) {
    var labelArray = _.clone(caseFileModel.get("labels")); // The clone() call ensures we get a new array reference - a requirement for the change event
    labelArray.push({ Key: 1, DisplayValue: messageData });
    caseFileModel.set({ "labels": labelArray });
});

ПРИМЕЧАНИЕ. В соответствии с API Underscore *1023* _.clone () копирует определенные вложенные элементы по ссылке.Корневой / родительский объект клонируется, поэтому он будет отлично работать для магистрали.То есть, если ваш массив очень прост и не имеет вложенных структур, например [1, 2, 3].

Хотя мой улучшенный код, приведенный выше, вызвал событие изменения, следующее не произошло, потому что мой массив содержал вложенные объекты:

var labelArray = _.clone(this.model.get("labels"));
_.each(labelArray, function (label) {
    label.isSelected = (_.isEqual(label, selectedLabel));
});
this.model.set({ "labels": labelArray });

Теперь, почему это важно?После очень тщательной отладки я заметил, что в моем итераторе я ссылался на тот же объект, который хранил базовый элемент ссылки.Другими словами, я случайно попал во внутренности своей модели и слегка перевернулся.Когда я вызвал setLabels (), backbone правильно распознал, что ничего не изменилось, потому что он уже знал Я перевернул этот бит.

После осмотра еще, люди, как правило, говорят, что операции глубокого копирования вJavaScript - это настоящая боль - ничего встроенного для этого нет.Так что я сделал это, и это отлично сработало - общая применимость может варьироваться:

var labelArray = JSON.parse(JSON.stringify(this.model.get("labels")));
_.each(labelArray, function (label) {
    label.isSelected = (_.isEqual(label, selectedLabel));
});
this.model.set({ "labels": labelArray });

Answer 2

Интересно.Я бы подумал, что .set({cas:someArray}) вызвало бы событие изменения.Как вы сказали, это не похоже, и я не могу заставить его срабатывать с .change() НО, я могу заставить события работать, если я просто делаю model.trigger('change') или model.trigger('change:attribute')

Это позволило бы вам инициировать событие изменения без взлома этого случайного атрибута.

Если бы кто-то мог объяснить, что происходит с событиями, Backbone и этим кодом, это помогло бы мне тоже кое-что узнать ... Вотнекоторый код.

Ship = Backbone.Model.extend({
    defaults: {
        name:'titanic',
        cas: new Array()
    },
    initialize: function() {
        this.on('change:cas', this.notify, this);
        this.on('change', this.notifyGeneral, this);
    },
    notify: function() {
        console.log('cas changed');
    },
    notifyGeneral: function() {
        console.log('general change');
    }
});

myShip = new Ship();

myShip.set('cas',new Array());
    // No event fired off

myShip.set({cas: [1,2,3]});  // <- Why? Compared to next "Why?", why does this work?
    // cas changed
    // general change

myArray = new Array();
myArray.push(4,5,6);

myShip.set({cas:myArray});  // <- Why?
    // No event fired off
myShip.toJSON();
    // Array[3] is definitely there

myShip.change();
    // No event fired off

Интересная часть, которая может вам помочь:

myShip.trigger('change');
    // general change
myShip.trigger('change:cas');
    // cas changed

Я нахожу это интересным, и я надеюсь, что этот ответ также вызовет некоторое проницательное объяснение в комментариях, которые я не делаю.есть.