Backbone.js : changement de pas de tir sur le modèle.modifier()

Je suis face à un "événement de changement de pas de tir" de l'émission sur Backbone.js =/

Ici mon point de vue de l'Utilisateur modèle :

    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');

        }

    });

Ici, le modèle de l'Utilisateur :

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);

            }
        }
    });

Dans le modèle Utilisateur, il y a le "cas" de l'attribut, qui est un tableau d'objets.

J'ai lu dans d'autres sujets que les événements de changement ne sont pas le feu sur le modèle.définir si les attributs ne sont pas une valeur.

Alors, j'essaie de déclencher directement l'événement de changement de modèle.changement de méthode.
Mais, je n'ai pas de "foo" journal de ma console ...

  • Pour l'instant, j'ai résolu ce problème en ajoutant un 'rand' attribut sur mon modèle. Je l'ai mis à une nouvelle valeur lorsque je veux le feu événement de changement =/
  • Heh heh. La solution temporaire qui sonne un peu hacky bien. 🙂 Si votre cas de l'attribut est en effet un attribut sur le modèle de l'Utilisateur, l'évolution de la User.set({cas:[array]}) doit déclencher l'événement de changement de m'pense. C'est toujours hacky, mais vous pouvez toujours utiliser le model.change() pour déclencher manuellement le changement, et le changement:l'attribut d'événement. Vous n'êtes pas en passant {silent:true} n'importe où êtes-vous? Pouvons-nous voir votre modèle d'Utilisateur code?
  • Salut Orangewarp, merci pour votre réponse 🙂 j'ai ajouté le modèle de l'Utilisateur sur le poste, c'est très simple. Comme d'autres ppl dire, de la colonne vertébrale n'a pas de déclenchement d'un événement de changement si l'attribut n'est pas la valeur. Et j'ai déjà essayer de déclencher manuellement le modèle.modifier(), ça ne fonctionne pas comme je l'ai dit ^^
InformationsquelleAutor Atyz | 2012-03-28
  1. 71

    Je suis assez nouveau à l'épine dorsale et j'ai eu ce même problème.

    Après avoir fait quelques recherches, j'ai trouvé quelques posts qui ont versé un peu plus de lumière sur les raisons de cette situation, et, finalement, les choses ont commencé à faire sens:

    Question 1

    Question 2

    Le cœur, la raison a à voir avec la notion de référence à l'égalité versus set/membre de l'égalité. Il semble que, dans une large mesure, la référence à l'égalité est l'une des principales techniques de la dorsale utilise pour savoir quand un attribut a changé.

    Je trouve que si j'ai recours à des techniques qui génèrent une nouvelle référence de type Array.slice() ou _.clone(), le changement de l'événement est reconnu.

    Ainsi, par exemple, le code suivant ne déclenche pas l'événement, car je suis modifiant la même référence de tableau:

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

    Bien que ce code ne déclencher l'événement:

    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 });
});

    REMARQUE: Selon le Trait de soulignement de l'API, _.clone() des copies de certains éléments imbriqués par référence. La racine/objet parent est cloné, donc il fonctionnera très bien pour la colonne vertébrale. C'est, si votre tableau est très simple et ne possède pas de structures imbriquées par exemple [1, 2, 3].

    Alors que mon amélioré le code ci-dessus déclenché le changement, les événements suivants n'est pas parce que mon tableau contenu des objets imbriqués:

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

    Maintenant, pourquoi cette question? Après le débogage très attentivement, j'ai remarqué que dans mon itérateur je faisait référence à la même référence d'objet backbone a stocker. En d'autres mots, j'avais, par inadvertance, a atteint dans les entrailles de mon modèle et renversé un peu. Quand j'ai appelé setLabels(), de la colonne vertébrale correctement reconnu que rien n'a changé car il déjà savait j'ai montré que peu.

    Après avoir regardé autour de quelques-uns plus, les gens semblent dire en général que profond des opérations de copie en javascript sont une vraie douleur - rien à faire. J'ai donc fait cela, ce qui a bien fonctionné pour moi - applicabilité générale peut varier:

    var labelArray = JSON.parse(JSON.stringify(this.model.get("labels")));
_.each(labelArray, function (label) {
    label.isSelected = (_.isEqual(label, selectedLabel));
});
this.model.set({ "labels": labelArray });
    • stringifying et d'analyse - soigné!
    • Merci beaucoup, je n'ai lu que les premières phrases, mais cela m'a aidé tout de suite, merci.
    • Même avec JSON.parse(JSON.stringify je trouve que les tableaux ne sont pas toujours déclencher une mise à jour. J'ai l'habitude .reverse() la matrice, puis de les trier, de l'autre côté si l'ordre est important.
    • à l'aide de _.extend({}, this.model.get("labels")) pouvez également retourner une copie de l'objet
    InformationsquelleAutor killthrush
  2. 14

    Intéressant. J'aurais pensé que .set({cas:someArray}) aurait tiré un événement de changement. Comme vous l'avez dit, il ne semble pas, et je ne peux pas le faire du feu avec .change() MAIS, je peux obtenir les événements de travailler si je ne l' model.trigger('change') ou model.trigger('change:attribute')

    Cela vous permettra de déclencher le changement de l'événement sans que l'aléatoire attribut hack.

    Si quelqu'un pouvait expliquer ce qui se passe avec les événements, de la colonne vertébrale, et ce code, qui pourrait m'aider à apprendre quelque chose de trop... Voici un peu de code.

    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

    La partie intéressante qui pourrait vous aider:

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

    Je trouve cela intéressant et j'espère que cette réponse va également engendrer certains perspicace explication dans les commentaires que je n'ai pas.

    • Quelle est la version de backbone/trait de soulignement utilisez-vous? Votre exemple de code des incendies de l'changements pour moi dans le Chrome débogueur avec BB 0.9.2 & _ 1.3.2: > myShip = new Ship(); > myShip.set('cas',new Array()); > myShip.set({cas: [1,2,3]}); cas changed general change > myArray = new Array(); > myArray.push(4,5,6); > myShip.set({cas:myArray}); cas changed general change
    • Avec les mêmes versions de BB & _ comme orangewarp les événements feux de trop. Mais dans un autre code, j'ai le même problème, la définition d'un tableau pas les feux de l'événement.... la recherche de la raison...
    • +1 c'est une meilleure solution que l'on a accepté la réponse. J'espérais que je pourrais déclencher l'événement de changement de moi-même, mais ne sais pas comment. J'étais sur le point de créer un mannequin scalaire attribut juste à déclencher des changements, mais ensuite défiler vers le bas pour cette réponse. Merci!
    • Comment appliquer cette méthode sur la zone de texte valeur est le changement. dois-je utiliser this.on('change:input.txtclass', this.notify, this); lorsque j'ai plusieurs zones de texte avec le même événement de changement de <input type="text" class="txtclass"></input> <input type="text" class="txtclass"></input>
    • Pas tout à fait. Je pense que ce que vous essayez de faire est de brancher événements DOM via jQuery et vous êtes de mélange avec épine Dorsale des Événements qui sont principalement utilisés pour exécuter des gestionnaires sur les Modèles et ainsi de suite. Les entrées de ne pas avoir de colonne vertébrale.Événements de l'étendue et de ne pas réagir à l'événement "change" je ne pense pas. Avec épine dorsale, tout tend à être pilotés par les données, de sorte que votre point de Vue, définir le modèle de données basé sur votre entrée de l'INTERFACE utilisateur, puis votre point de Vue serait à l'écoute pour le modèle attr pour le "changement" de l'événement pour ensuite déclencher this.notify. Aussi, vous devriez être en utilisant la plus récente .listenTo plutôt que .à ce point.
    InformationsquelleAutor jmk2142