Javascript 管理主干集合的多个视图

我正在创建一个主干应用程序，其中包含查看报告的部分；该部分包括三个部分：报告链接菜单、显示报告的标题和显示报告的内容。用户需要单击报告链接，该链接将获取相关模型的数据。然后报告标题和内容应相应更新。但是，我不确定视图绑定应该如何工作，每个报表可能返回稍微不同的数据，这需要不同的视图模板。这是我的（仅在本例中覆盖了fetch方法）

现在，我为每个报告提供了一个主干模型和所有报告的主干集合：

App.Models.Report = Backbone.Model.extend();

App.Collections.Reports = Backbone.Collection.extend({
    model: App.Models.Report,
    url: "/reports"
});

菜单视图绑定到集合，单击后，设置其他两个视图正在侦听的

App.State.title

和

App.State.cid

：

App.Views.ReportLink = Backbone.View.extend({
     tagName: 'li',
     className: 'is-clickable',

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

     render: function() {
         this.el.innerHTML = this.model.get('title');
         this.$el.attr('data-CID', this.model.cid); // store the model's cid
     }
});

App.Views.ReportMenu = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {
        this.listenTo(this.collection, 'reset', this.render)
        this.render();

        this.$el.on('click', 'li', function() {
            App.State.set({
                'title': this.innerHTML,
                'cid': $(this).attr('data-CID') // cid of the clicked view's model
            });
        });
    },

难点在于报告内容；它当前所做的是侦听对App.State.cid的更改，然后使用该cid调用给定模型上的fetch。此提取使用报表行的子集合填充模型。然后，“报告内容”视图根据子集合数据设置其html，并且还应将正确的模板应用于数据：

App.Views.ReportContent = Backbone.View.extend({
    initialize: function(attrs) {
        this.listenTo(this.model, 'change:cid', this.render);
        this.reportsCollection = attrs.reportsCollection;
    },

    render: function() {
        var self = this,
            cid = this.model.get('cid'),
            model = this.reportsCollection.get(cid);

        model.fetch({
            success: function() {
                var html = '';

                model.subCollection.each(function(model) {
                    var template = _.template($('#templateReportA').html()); // want to dynamically set this
                    html += template(model.toJSON());
                });

                self.$el.html(html);
            }
        });
    }
});

1） 对于这种具有集合的多视图情况，这是正确的实现方式吗

---

2） 如何传递每个报表所需的正确模板？现在，我显式地传递报表A的视图模板。我可以考虑将其存储在模型上，但模板应该与视图关联

如果您的

cid

s都是由HTML

id

s中合法的字符组成的，那么一个简单的解决方案是将所有报表模板命名为

templaterReportXXX

，其中“xxx”是报表的

cid

，然后将模板加载行更改为

var template = _.template($('#templateReport'+cid).html());

---

非常感谢这个简单的解决方案！我实现了它，然后将所有的

cid

引用更改为

id

s，这样我就可以控制引用了。