Backbone.js的 - 从单击事件访问模型 [英] backbone.js - accessing a model from a click event

问题描述

我有一个包含CellModels的CellCollection一个BoardView。我从数据库获取集合，然后创建CellViews。

I have a BoardView containing a CellCollection of CellModels. I fetch the collection from the db and then create the CellViews.

直到我尝试通过对BoardView click事件访问CellModel这一切工作顺顺当当。我不能让底层模型在所有...只是意见。有没有办法做到这一点？

This all works swimmingly until I try to access a CellModel via a click event on the BoardView. I can't get to the underlying models at all... only the views. Is there a way to do this?

我已经尝试包括相关的code以下：

I've attempted to include the relevant code below:

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) {
        // ?????????
    }
});

我需要点击发生在BoardView，而不是CellView，因为它涉及到具体的电路板的逻辑。

I need the click to "happen" on the BoardView, not the CellView, because it involves board-specific logic.

推荐答案

我觉得至少两种方法您可以使用此：

I can think of at least two approaches you might use here:

1. 通过BoardView在初始化CellView，然后处理的CellView事件：

1. Pass the BoardView to the CellView at initialization, and then handle the event in the 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
    }
});

本会的工作，但我preFER不享有打电话给对方的方式，因为这使他们更加紧密耦合。

This would work, but I prefer to not have views call each other's methods, as it makes them more tightly coupled.

附上CellModel ID到DOM，当你使它：

Attach the CellModel id to the DOM when you render it:

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

这可能是一个少许清洁剂，因为它可避免上述紧耦合的，但我认为无论哪种方式是可行的。

This is probably a little cleaner, in that it avoids the tight coupling mentioned above, but I think either way would work.

这篇关于Backbone.js的 - 从单击事件访问模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！