相关疑难解决方法(0)

我有超级视图谁负责渲染子视图.当我重新渲染的超视图中的所有事件的子视图都将丢失.

这是一个例子:

var SubView = Backbone.View.extend({
    events: {
        "click": "click"
    },

    click: function(){
        console.log( "click!" );
    },

    render: function(){
        this.$el.html( "click me" );
        return this;
    }
});

var Composer = Backbone.View.extend({
    initialize: function(){
        this.subView = new SubView();
    },

    render: function(){
        this.$el.html( this.subView.render().el );             
    }
});


var composer = new Composer({el: $('#composer')});
composer.render();

当我点击click me div时,会触发事件.如果我composer.render()再次执行,所有内容看起来都很相似,但不会再触发click事件.

检查工作jsFiddle.

我把我的头发拉出来,除非我做了最荒谬的事情,否则在重新渲染视图之后似乎无法让鼠标事件在我的骨干视图上工作:

$("a").die().unbind().live("mousedown",this.switchtabs);

我实际上已经在那里但是决定更新到最新的主干并尝试使用新delegateEvents()功能.

这是我的项目ID结构的方式:

Appview / AppRouter
  |
  ----->PageCollection
             |
             ------->PageView/PageModel
             ------->PageView/PageModel      these page view/models are not rendered
             ------->PageView/PageModel
             |
             ------->PageView/PageModel
                        |
                        ----->render()      *when a pageview is rendered*
                                |
                                -----> Creates new 
                                     Tabcollection
                                       |
                                       --->TabModel/TabView   <-- this is where the issue is 

会发生的事情是tabcollection有一个主tabview来管理所有选项卡,然后为每个选项卡创建一个新的模型/视图,并在每次加载选项卡时让监听器重新呈现tabview.如果tabview被重新渲染,除非我把那个有人工作的jQuery语句放在那里,否则没有任何鼠标事件可以工作.

下面是tabview并渲染(我已经将它剥离了很多)

var TabPanelView = Backbone.View.extend({
    className:      "tabpanel",
    html:           'no content',
    model:          null,
    rendered:       false,
    events:{
        'click a.tab-nav': 'switchtabs'
    },
    initialize: function(args)
    {
        this.nav            = $("<ol/>");
        this.views          = args.items;
        this.className      = args.classname?args.classname:"tabpanel";
        this.id             = args.id;
        this.container …