Question

当我触发单击具有主干事件的单元格时，我没有获取单元格视图，即时获取行的视图。

我正在发送模型，并将周属性归属于我的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>

Answer 1

您需要创建一个视图，该视图将用作单元格视图并渲染每个单元格以创建新视图。

单元格视图

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

这只是如何为每个单元格呈现视图的示例，它没有正确考虑模型和模板中的每个属性。

如何在骨干事件点击上获取单元格视图？

1 个答案:

单元格视图

行视图