使用backbone.js在tr之间添加div

时间:2013-12-20 18:06:55

标签: html backbone.js

我有这个表的模板

<script id="allFaxesTemplate" type="text/template">
    <td><%= FaxSentDate %></td>
    <td><%= SentTime %></td>
    <td><%= FaxRecipient %></td>
    <td><%= FullName %></td>
    <td><%= FaxSubject %></td>
    <td><%= FaxCategory %></td>
    <td><%= NumberOfRequests %></td>

</script>

我的主干观点

/*
|----------------------------------------------------------------------------------------
| Comment: All Faxes View ====> Table View
|----------------------------------------------------------------------------------------
*/

App.Views.Faxes = Backbone.View.extend({
    tagName: 'tbody',

    render: function () {
        this.collection.each(this.addOne, this);        
        return this;
    },

    addOne: function (fax) {
        var faxView = new App.Views.Fax({ model: fax });
        //console.log(faxView.render().el);
        this.$el.append(faxView.render().el);
    }
});

/*
|----------------------------------------------------------------------------------------
| Comment: Single Fax View ===> Row View
|----------------------------------------------------------------------------------------
*/

App.Views.Fax = Backbone.View.extend({
    tagName: 'tr',

    template: template('allFaxesTemplate'),

    events: {
        'click': 'details'
    },

    /*
    initialize: function () {
    vent.on('QADetails:show', this.showDetails, this);
    },*/

    render: function () {
        var context = this.model.toJSON();
        context['FaxSentDate'] = this.getDateFormat(this.model.get('FaxSentDate'));
        context['SentTime'] = this.getTimeFormat(this.model.get('SentTime'));
        this.$el.html(this.template(context));

        return this;
    },

    details: function () {
        console.log(this.model.get('FaxID'));
        //console.log(this.model);
        vent.trigger('fax:details', this.model);        
    },

    //Change the date format from timespan
    getDateFormat: function (oldDate) {
        var newDate = new Date(parseInt(oldDate.substr(6)));
        return newDate.toDateString('MM-dd-yyyy');
    },
    //Change the time format from timespan
    getTimeFormat: function (oldTime) {
        var newTime = new Date(parseInt(oldTime.substr(6)));
        return newTime.toLocaleTimeString();
    }
});

用于在单击时显示行详细信息的骨干视图

/*
|----------------------------------------------------------------------------------------
| Comment: Details View ===> Details per Row
|----------------------------------------------------------------------------------------
*/
App.Views.FaxDetailsView = Backbone.View.extend({

    template: template('faxQADetails'),

    initialize: function () {
        this.render();        
    },

    render: function () {
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
        return this;
    }

});

有一个与上述视图相关的模板(代码未显示)。

到目前为止,它在显示数据方面起作用,但它并没有按照我的意愿去做。当我点击该行时,我希望行中的详细信息显示在div中。 Backbone附加div,但它将它附加在所有trs之间。我只是想把它只附加到我点击的tr上。请帮忙!

谢谢

0 个答案:

没有答案