Question

我正在创建一个Backbone应用程序，其中包含查看报告的部分;该部分包含三个部分：报告链接菜单，显示报告的标题以及显示报告的内容。用户要单击报告链接，该链接将获取关联模型的数据。然后报告标题和内容应相应更新。但是，我不确定视图绑定应该如何工作，并且每个报告可能返回稍微不同的数据，这需要不同的视图模板。这是我的JSFiddle（仅为此示例重写了获取方法）

现在，我为每个报告提供了一个Backbone模型，并为所有报告提供了Backbone集合：

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的视图模板。我可以考虑将它存储在模型上，但模板应该与视图相关联。

Answer 1

如果您的cid全部由HTML id中合法的字符组成，那么一个简单的解决方案就是将所有报告模板templateReportxxx命名为“xxx”是报告的cid，然后只需将模板加载行更改为

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

管理Backbone集合的多个视图

1 个答案: