backbone.js - l'accès à un modèle à partir d'un événement de clic

J'ai un BoardView contenant un CellCollection de CellModels. Je extraire la collection de la db et de créer ensuite le CellViews.

Tout cela fonctionne à merveille jusqu'à ce que je tente d'accéder à un CellModel par l'intermédiaire d'un événement de clic sur le BoardView. Je ne peux pas obtenir à la sous-jacentes des modèles de... seulement les points de vue. Est-il un moyen de faire cela?

J'ai tenté d'inclure dans le code ci-dessous:

CellModel = Backbone.Model.extend({});

CellCollection = Backbone.Collection.extend({
    model : CellModel
});

CellView = Backbone.View.extend({
    className : 'cell',
});

BoardView = Backbone.View.extend({
    this.model.cells = new CellCollection();

    render : function() {
        this.cellList    = this.$('.cells');
        return this;
    },

    allCells : function(cells) {
        this.cellList.html('');
        this.model.cells.each(this.addCell);
        return this;
    },

    addCell : function(cell) {
        var view = new Views.CellView({
            model : cell
        }).render();

        this.cellList.append(view.el);
    },

    events : {
        'click .cell' : 'analyzeCellClick',
    },

    analyzeCellClick : function(e) {
        //?????????
    }
});

J'ai besoin de le clic pour "arriver" sur le BoardView, pas la CellView, parce qu'elle implique la carte logique spécifique.

OriginalL'auteur cosmo_kramer | 2011-09-21

  1. 11

    Je ne peux penser à au moins deux approches, vous pouvez utiliser ici:

    1. Passer le BoardView à la CellView lors de l'initialisation, puis de gérer l'événement dans le CellView:

      var CellView = Backbone.View.extend({
    className : 'cell',

    initialize: function(opts) {
        this.parent = opts.parent
    },

    events : {
        'click' : 'analyzeCellClick',
    },

    analyzeCellClick : function() {
        //pass the relevant CellModel to the BoardView
        this.parent.analyzeCellClick(this.model);
    }
});

var BoardView = Backbone.View.extend({
    //...

    addCell : function(cell) {
        var view = new Views.CellView({
            model : cell,
            parent : this
        }).render();

        this.cellList.append(view.el);
    },

    analyzeCellClick : function(cell) {
        //do something with cell
    }
});

      Ce serait le travail, mais je préfère ne pas avoir de vues appel des uns et des autres méthodes, comme il les rend plus étroitement couplées.

    2. Fixer le CellModel id pour les DOM quand vous le rendre:

      var CellView = Backbone.View.extend({
    className : 'cell',

    render: function() {
        $(this.el).data('cellId', this.model.id)
        //I assume you're doing other render stuff here as well
    }
});

var BoardView = Backbone.View.extend({
    //...

    analyzeCellClick : function(evt) {
        var cellId = $(evt.target).data('cellId'),
            cell = this.model.cells.get(cellId);
        //do something with cell
    }
});

      C'est probablement un peu plus propre, en ce qu'elle évite le couplage mentionné ci-dessus, mais je pense que de toute façon serait de travailler.

    OP ici. les deux solutions ont fonctionné parfaitement... et #1 est parfait pour mes besoins. merci beaucoup.
    Grand - si vous êtes satisfait de la réponse, vous pouvez l'accepter en cliquant sur la case à cocher en dessous du score :).
    La Solution 2, à mon avis, n'est pas une bonne idée. Le point de l'ensemble de la Dorsale est de récupérer les données depuis le serveur, et l'afficher dans la vue du client, et de ne pas obtenir les données à partir de la vue et de l'envoyer en arrière. Cela fonctionne, mais ce n'est pas une belle façon.

    OriginalL'auteur nrabinowitz

  2. 12

    Bonne question! Je pense que la meilleure solution serait de mettre en place un

    EventBus aka EventDispatcher

    de coordonner tous les événements entre les différents domaines de votre application.

    Prendre ce chemin semble propre, faiblement couplé, facile à mettre en œuvre, extensible et il est en fait suggéré par l'épine dorsale de la documentation, voir Épine Dorsale Docs

    Veuillez en lire plus sur le sujet ici et ici car (même si j'ai essayé dur), mon explication est médiocre pour moi.

    Cinq étapes explication:

    1. Créer un EventBus dans votre main ou ailleurs, comme un util et include ou require il

       var dispatcher = _.clone(Backbone.Events); //or _.extends

    2. Ajouter un ou plusieurs de rappel hanlder(s)

       dispatcher.CELL_CLICK = 'cellClicked'

    3. Ajouter un déclencheur pour l'Eventlistener de votre childView (ici: la CellView)

       dispatcher.trigger(dispatcher.CELL_CLICK , this.model);

    4. Ajouter un Écouteur à la fonction d'initialisation de votre parentView (ici: la BoardView)

       eventBus.on(eventBus.CARD_CLICK, this.cardClick);

    5. Définir le correspondant de Rappel à l'intérieur de votre parentView (et l'ajouter à votre _.bindAll)

       cellClicked: function(model) {
 //do what you want with your data here
 console.log(model.get('someFnOrAttribute')
 }

    OriginalL'auteur Bruiser

  3. 6

    Je laisserais le CellView gérer l'événement de clic, mais ce sera juste déclencher une épine Dorsale de l'événement:

    var CellView = Backbone.View.extend({
    className : 'cell',

    initialize: function() {
        _.bindAll(this, 'analyzeCellClick');
    }

    events : {
        'click' : 'analyzeCellClick',
    },

    analyzeCellClick : function() {
        this.trigger('cellClicked', this.model);
    }
});

var BoardView = Backbone.View.extend({
    //...

    addCell : function(cell) {
        var view = new Views.CellView({
            model : cell
        }).render();

        this.cellList.append(view.el);
        view.bind('cellClicked', function(cell) {
              this.analyzeCellClick(cell);
            };
    },

    analyzeCellClick : function(cell) {
        //do something with cell
    }
});
    Solution sympa..Mais il y a quelques erreurs dans ton code. 1. vue.bind('cellClicked" cela.analyzeCellClick) 2. Juste essayer le contexte que nous obtenons dans la analyzeCellClick. Il sera de vue, car cette méthode est déclenchée par cellview Donc plutôt l'utilisation de fermetures ou de l'utilisation de la Fonction.bind.
    Merci @blunderboy!
    cette approche semble plus cohérent avec la façon dont je comprends comment épine Dorsale est censé fonctionner. ou je me trompe?

    OriginalL'auteur sntran