重新初始化 backbone 视图后事件未触发

Question

我正在尝试整理我的 Backbone 项目中的代码。我面临的问题之一是我在渲染器的初始化函数中初始化了所有视图。我现在决定一次只初始化一个视图（及其子视图）。

页面渲染正常，我可以在视图之间来回切换。硬刷新页面（F5 等）后视图中绑定的事件会触发，但一旦我移动到另一个视图，事件就不再触发。我不明白为什么在第二次初始化时应该完全删除以前的视图。然后我们应该得到一个干净的渲染，就像它在刷新后第一次加载时一样。谁能解释为什么事件没有触发？

下面是演示问题的代码示例：

newView: function(view){
            //Check if the holding variable is defined. If it is then  
            //call the close function
            if (routerView == undefined){
                console.log("routerview is undefined")
            } else {
                // This calls a function on the view which will remove any
                //children, once it's done that it will remove its self.
                routerView.close();
            }

            // When removing the view it removes the parent element in the index file.
            // Here we add the container back in and set it to the new view's el
            if ( $('#AppContainer').length == 0 ){
                // Add new div container to the app and assign it to the 'el'
                view.el = $('body').prepend('<div id="AppContainer"></div>');                   
            }
            // Return view to the route for rendering.      
            return routerView;
        },

其中一个视图中的关闭函数如下所示：

close: function(){
    //Deal with any child views here as well.
    this.remove();
},

最后，在我们调用 newView 函数的路径中看起来

admin: function(){
    // Call the newView function with a new instance of the AdminView and then assign it back        
    this.adminView = router.newView( new AdminView({ el : $("#AppContainer")} ));
    //Render the view
    this.adminView.render();

},

Answer 1

我已经做了一些更多的工作来调查这个问题并且我发现了它。问题是双重的，但出现在同一行代码上。

view.el = $('body').prepend('<div id="AppContainer"></div>');

我在 backbone docs 上发现您应该使用 setElement 函数来更改视图的元素。然后这将传输所有绑定事件，这意味着它们现在可以工作了。

然后我发现 $('body').prepend('<div id="AppContainer"></div>') 将 return 引用 body 而不是新的 #AppContainer 但它实际上 return 是对 body 的引用，这意味着视图内容被放置在正文中。

重新初始化 backbone 视图后事件未触发

Events not firing after reinitialising backbone views

javascript

memory

model-view-controller

view

backbone.js