如何获得骨干事件的单元格视图单击

How to get the cell view on backbone event click?

本文关键字：单元格视图单击事件何获得更新时间：2023-09-26

当我触发点击一个单元格与骨干事件我没有得到单元格视图，我得到的行视图。

我正在发送模型和周属性给我的UserView。

所以我想要的是每个单元格都是一个唯一的骨干视图。有人能帮我吗?

骨干视图

    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>

您需要创建一个视图，它将作为单元格视图，并呈现每个单元格创建一个新视图。

细胞视图

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

行视图

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

这只是一个如何渲染每个单元格视图的例子，它没有适当地考虑到你的模型和模板中的每个属性