How to get the cell view on backbone event click?

Question

When i trigger a click on a cell with backbone event im not getting the cell view, im getting the view of the row.

I'm sending the models and the week atributes to my UserView.

So what i want is that every cell is a unique backbone view. Can anyone help me?

Backbone view

    app.types.UserView = Backbone.View.extend({

        tagName: 'tr',

        $sidebar: $('#userView'),

        template: _.template($('#user-template').html()),

        events: 
        {
                //"click .test": "open",
                "click td.test": "useri",
        },

        initialize: function(options)
        {
                this.options = options;
                console.log("this.options", this.options.object.tjedan);
                console.log("this.model: ", this.model);
                this.$sidebar.append(this.render());
                this.tableClick();
                //this.open();
                //this.getWeeksInMonth();
                //console.log("this.tjedan: ", this.tjedan);
        },

        render: function() 
        {      
                this.$el.html(this.template(_.extend(this.model.attributes, {model_cid: this.model.cid, tjedan: this.options.object.tjedan})));
                console.log("this.render: ", this);
                return this.$el;    
        },

        useri: function()
        {       
                console.log("this.model", this); 
        }


});

HTML

<div class="container-fluid">
  <div class="row">
    <div id="collection" class="col-md-12 sidebar">  
            <table class="table"> 
                <thead id="weekView">   
                        <script type="text/template" id="week-template">  
                            <th>Users</th>                                  
                            <%  for(var i=0;i<tjedan.length;i++)%> {
                                    <th class="list-group week" scope="row"><%= tjedan[i].dan + " " + tjedan[i].datum + "." + tjedan[i].mjesecBrojevi + "." %></th>
                            }%>
                        </script>   
                </thead>

                <tbody id="userView">

                </tbody>
                    <script type="text/template" id="user-template">   

                                <th class="list-group model" scope="row" data-cid="<%= model_cid %>"><%= username %></th> 
                                <%  for(var i=0;i<tjedan.length;i++)%> {
                                        <td id="<%= id + tjedan[i].dan + tjedan[i].datum %>" class="list-group" scope="row" data-id="<%= model_cid + '_' + tjedan[i].dan + tjedan[i].datum + tjedan[i].mjesecBrojevi %>"></td>
                                }%> 


                    </script>  


            </table>      
        </div>
    </div>
</div>

Answer 1

You need to create a view which will serve as the cell view and render each cell creating a new view.

Cell view

var CellView = Backbone.View.extend({
    tagName: 'td',
    className: 'list-group',
    template: _.template('stuff inside your `td`'),
    attributes: function() {
        return { 
            id: this.model.get('your_choice'), 
            scope: 'row',
            "data-id": this.whatever
        };
    },
    events: {
        "click": "onClick",
    },
    render: function() {
        this.$el.empty().append(this.template(this.model.toJSON()));
        return this;
    },
    onClick: function(e) {
        // click on cell
    }

});

Row view

var RowView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template('<th class="list-group model" scope="row" data-cid="<%= model_cid %>"><%= username %></th>'),
    initialize: function(options) {
        this.options = _.extend({ /* default options */ }, options);
        this.childViews = [];
    },
    render: function() {
        // when using extend, the first object is modified, `toJSON` returns
        // a shallow copy of the attributes, avoiding modifying them.
        var data = _.extend(this.model.toJSON(), {
            model_cid: this.model.cid,
            tjedan: this.options.object.tjedan
        });

        this.$el.empty().append(this.template(data));
        this.collection.each(this.renderCell, this);
        return this; // render always return this for chaining.
    },

    renderCell: function(model) {
        var view = new CellView({
            model: model
        });
        this.childViews.push(view);
        this.$el.append(view.render().el);
    },

    remove: function() {
        // explicitely remove the views to avoid memory leaks with listeners.
        _.invoke(this.childViews, 'remove');
    }
});

This is just an example of how to render a view per cell, it doesn't properly take into account your models and every attributes in the templates.