提升骨干.js视图事件

Raising a Backbone.js View event

本文关键字：视图 事件 js      更新时间：2023-09-26

我想找到一种方法来提升骨干.js"事件"，而不会在模型或 dom 中发生任何变化。

例如，我正在异步加载Facebook SDK。我订阅了 auth.login 事件，并希望向我的视图发送一条消息，指出用户已登录，以便它可以适当地重新呈现自身。

我的观点类似于这样：

window.CreateItemView = Backbone.View.extend({
  el: $('#content'),
  initialize: function() {
    this.render();
  },
  render: function() {
    // do something
    return this;
  },
  setSignedRequest: function(signedRequest) {
    //do something with signedRequest
  }
});

在我的Facebook代码中，我这样做：

  FB.Event.subscribe('auth.login', function(response){
    if (response.status === 'connected') {
      var uid = response.authResponse.userID;
      var accessToken = response.authResponse.accessToken;
      window.signedRequest = response.authResponse.signedRequest;
      if (window.view && window.view.setSignedRequest) {
          window.view.setSignedRequest(window.signedRequest);
      }
    }
  });

但是，当 window.view 存在时，它看不到 setSignedRequest 方法。我确保我的脚本以正确的顺序加载。奇怪的是，我在不同的页面上有相同的代码，尽管是不同的 View 对象，但它工作正常。我还没有看到任何可以解释这一点的差异。

更好的解决方案是引发某种事件并让视图侦听它。但是，我不想在模型上使用更改事件，因为 signedRequest 不应该是模型的属性。有没有更好的方法来实现这一点？

Backbone.View扩展了Backbone.Events，这意味着您可以轻松触发自定义事件并传递所需的任何数据

var View = Backbone.View.extend({
    initialize: function() {
        this.on('customEvent', this.doSomething, this);
    }
    doSomething: function(someData) {
        // this!
    }
});
var view = new View();
view.trigger('customEvent', "someDataHere");

虽然我不知道为什么你在视图上看不到该方法 - 它应该有效 - 您是否 100% 确定您正确实例化了视图？ 那个window.view是CreateItemView的实例？

如果要在模型外部执行此操作并在视图中订阅事件，则可以执行以下操作：

var SomeObject = {...};
_.extend(SomeObject, Backbone.Events);

然后，您可以订阅某个对象上的事件

SomeObject.on('myevent', someFunc, this);

或触发事件

SomeObject.trigger('myevent', data);
相关文章：