【问题标题】:Backbone.js View removing and unbindingBackbone.js 视图移除和解除绑定
【发布时间】:2012-01-31 13:59:02
【问题描述】:

当我的页面打开时,我调用集合并填充视图:

var pagColl = new pgCollection(e.models); 
var pagView = new pgView({collection: pagColl});

另外(通过 Datepicker),我希望用不同的模型填充同一个集合并再次实例化视图。

我遇到的问题是如何在打开新的之前关闭原始的pagView 并清空pagColl,因为这种“幽灵视图”给我带来了问题。上面提到的变量是局部变量吗?是不是我需要创建一个全局的pagCollreset() 这个?

【问题讨论】:

    标签: javascript backbone.js


    【解决方案1】:

    其实已经有很多关于这个话题的讨论了, 骨干对你没有任何作用,你必须自己做,这是你必须照顾的:

    1. 移除视图(这委托​​给 jQuery,jquery 将其从 DOM 中移除)

      // to be called from inside your view... otherwise its  `view.remove();`
      this.remove();
      

      这会从 DOM 中移除视图并移除绑定到它的所有 DOM 事件。

    2. 删除所有主干事件

      // to be called from inside the view... otherwise it's  `view.unbind();`
      this.unbind();
      

      如果您的视图中有某个事件(按钮)委托给调用this.trigger('myCustomEvent', params);的函数,这将删除绑定到视图的所有事件

    如果您想了解如何实现一个系统,我建议您阅读 Derrick Bailey 关于僵尸视图的博文:http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

    另一种选择

    另一种选择是重用当前视图,并让它重新渲染或附加视图中的某些项目,绑定到集合的 reset 事件

    【讨论】:

    • 我实际上使用了您的其他答案之一,这非常好。我认为我对我的问题的解释不够简洁。 stackoverflow.com/a/8275139/578667
    • 是的,其他答案或多或少是我在底线中描述的示例,另一个选项...将函数绑定到 collection.reset 并在重置事件发生时更改视图触发。就像我在您的链接中对“myEvent”事件的视图更新的问题给出的答案一样。
    • obj.unbind()obj.off() 的别名。
    • 我如何设置 el: '#bbFilter',当我无法使用 THIS 解除绑定和删除时。我重新渲染我的项目,这就是为什么我不能有 EL,我只能在调用它时设置。因此我需要一种方法让它知道删除哪个 EL 需要什么。谢谢你:)
    • @User1291223 我不清楚你的问题到底是什么,你能把它从这个问题中分离出来,然后为它提出一个新的 SO 问题吗?最好有你的问题的代码示例和你想要创建的内容,然后我可以看看你的问题。
    【解决方案2】:

    我也面临同样的问题。我调用view.undelegateEvents() 方法。

    Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

    【讨论】:

      【解决方案3】:

      我使用stopListening方法解决问题,通常我不想从DOM中删除整个视图。

      view.stopListening();
      

      告诉一个对象停止监听事件。要么调用 stopListening 没有参数让对象删除所有已注册的 回调......或者更精确地告诉它删除只是 它在特定对象或特定事件上侦听的事件,或 只是一个特定的回调。

      http://backbonejs.org/#Events-stopListening

      【讨论】:

        【解决方案4】:

        这是我建议使用的一种替代方法,即使用 Pub/Sub 模式。

        您可以设置View绑定的事件,并选择此类事件的条件。

        例如条件函数中的PubSub.subscribe("EVENT NAME", EVENT ACTIONS, CONDITION);,可以检查视图是否还在DOM中。

        var unsubscribe = function() {
            return (this.$el.closest("body").length === 0);
        };
        PubSub.subscribe("addSomething",_.bind(this.addSomething, this), unsubscribe);
        

        然后,您可以在其他地方通过PubSub.pub("addSomething"); 调用 pub/sub,而不必担心重复操作。

        当然,有取舍,但这种方式似乎没有那么困难。

        【讨论】:

          猜你喜欢
          • 2012-06-01
          • 1970-01-01
          • 1970-01-01
          • 2012-03-20
          • 1970-01-01
          • 1970-01-01
          • 2020-03-22
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多