当前位置：文江博客话题详情

我应该如何让 Backbone 应用程序中的视图相互更改？

发布于 2024-12-18 19:30:05 字数 247 浏览 0 评论 0原文

我有一个名为 Foo 的 Backbone 视图，它有一个滚动条。当滚动条向某个方向移动时，我希望应用程序中的其他视图以各种方式发生变化。这些视图没有嵌套在 Foo 内部——它们是完全独立的并且独立管理。

我是否应该将对所有其他视图的引用传递到 Foo 的构造函数中，以便它可以手动更新它们？或者我应该使用事件来通知滚动条移动的其他视图？如果是这样，该事件应该由 Foo 触发哪个对象，并由其他视图监听？

这些纯粹是视觉上的变化，没有模型支持它们。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乜一 2024-12-25 19:30:05

在这种情况下我会使用事件，

以这个例子为例：

NavigationView = Backbone.View.extend({
  initialize: function(options){
    options.events.bind("navigation:change", this.changeNavigation);
    this.render();
  },

  changeNavigation: function(key){
    $('.menuItem', $(this.el)).removeClass("active");
    $('.menuItem', $(this.el)).filter("." + key).addClass("active");
  },

   render: function(){
     // rendering goes on here....

   }
});

UserListView = Backbone.View.extend({

  initialize: function(options){
    options.events.trigger("navigation:change", "users");
    this.render();
  },

  render: function() {
    // rendering goes on here....

  }
});

// kickstart the application

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

var myNavigation  = new NavigationView({events: myEvents});

// this is just a collection of users... i left it out as it is not really the point here...
var users = new UserList(); 

var myUserList = new UserListView({collection: users, events: myEvents});

如果您需要更多信息，关于将 1 个视图引用到另一个视图或事件，您还可以仔细阅读 Derick Bailey 的这篇文章，他将上述方法解释为 eventAggregator并列出了有关如何使用它（和替代方案）的记录示例。
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

i would use events in this case

take this example:

NavigationView = Backbone.View.extend({
  initialize: function(options){
    options.events.bind("navigation:change", this.changeNavigation);
    this.render();
  },

  changeNavigation: function(key){
    $('.menuItem', $(this.el)).removeClass("active");
    $('.menuItem', $(this.el)).filter("." + key).addClass("active");
  },

   render: function(){
     // rendering goes on here....

   }
});

UserListView = Backbone.View.extend({

  initialize: function(options){
    options.events.trigger("navigation:change", "users");
    this.render();
  },

  render: function() {
    // rendering goes on here....

  }
});

// kickstart the application

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

var myNavigation  = new NavigationView({events: myEvents});

// this is just a collection of users... i left it out as it is not really the point here...
var users = new UserList(); 

var myUserList = new UserListView({collection: users, events: myEvents});

should you need more info, on either referencing 1 view to another, or events, you can also take a good look at this article by Derick Bailey, he explains the above method as an eventAggregator and lists a documented example on how to work with it (and alternatives).
http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

回复收藏 0 原文

~没有更多了~