Question

我正在使用骨干我正在尝试创建一个标签视图，该视图使用内部面板在这种情况下呈现表视图的相同实例。我的问题是，当第二个实例渲染删除第一个实例时，即使我一直在调试代码，我可以看到每个视图有两个不同的对象。

以下是创建对象的代码：

var tabs = new Dashboard.Tab({
   id: 'reward-tab',
   panels: [{
      id: 'active-panel',
      active: true,
      label: 'Actives',
      content: new Dashboard.Table({
         id: 'active-table',
         model: new Dashboard.TableModel(null,{
            active: true
         })
      })
   },{
     id: 'dismiss-panel',
     active: false,
     label: 'Not active',
     content: new Dashboard.Table({
        id: 'dismiss-table',
        model: new Dashboard.TableModel(null,{
          active: false
        })
     })
   }]
});

标签视图代码

Dashboard.Tab = Backbone.View.extend({
    template : Handlebars.templates['tabs.hbs'],
    panels: [],

    events: {
        'click .nav-tabs li a' : 'onTabClick'
    },

    initialize: function() {
        this.id = this.options.id;
        this.panels = this.options.panels;
    },

    onTabClick: function(e) {
        e.preventDefault();
        ...
    },

    render:function(){
        //Renders places holders
        this.$el.html(this.template({
            id: this.id,
            tabs : this.panels
        }));

        $.each(this.panels, function(index, panel){
           if(panel && panel.content) {
               panel.content.on('ready', function(){
                   $('#' + panel.id).append(panel.content.el);
               });
           }
        });
    }
});

表格代码：

Dashboard.Table = Backbone.View.extend({

    tableId: 'my-table',

    initialize: function() {
        var me = this;
        this.tableId = this.options.id;

        this.model.fetch({reset: true}).done(function () {
            me.render();
        });    
        ....
    },
    render: function() {
        ....
        this.trigger("ready");
    }
});

就像我说的那样，我的问题似乎是由于某种原因，第二个视图它删除了第一个实例的html而只渲染了第二个实例。

任何帮助都将受到赞赏。

由于

Answer 1

我有一个AHA时刻，我认为问题可能是我没有为每个视图定义不同的el。

当你没有Backbone在一个泛型div元素中创建视图时，所以在这种情况下我所做的就是为每个元素添加一个新元素，这就是诀窍。

修复：

var tabs = new Dashboard.Tab({
   id: 'reward-tab',
   panels: [{
      id: 'active-panel',
      active: true,
      label: 'Actives',
      content: new Dashboard.Table({
         id: 'active-table',
         el: $('<div class="active-table"></div>'),
         model: new Dashboard.TableModel(null,{
            active: true
         })
      })
   },{
     id: 'dismiss-panel',
     active: false,
     label: 'Not active',
     content: new Dashboard.Table({
        id: 'dismiss-table',
        el: $('<div class="not-active-table"></div>'),
        model: new Dashboard.TableModel(null,{
          active: false
        })
     })
   }]
});

在标签内使用的同一视图的骨干多个实例

1 个答案: