javascript - 将 AutobahnJS (WebSockets) 与 Backbone 解耦

Question

我有一个具有简单搜索表单的 Backbone 应用程序，当用户在此搜索中写一些东西时，我使用高速公路订阅搜索表单上的给定文本(例如 - 我搜索“foo”，我订阅“foo”)。

如何分离高速公路逻辑？目前在我看来，当用户点击提交时，我会做接下来的事情 -

// On view:

  onUserSearch : function(evt) {
    evt.preventDefault();

    var searchText = this.$el.find("#searchBox").val();
    // searchResultsCollection is an instance of Backbone.Collection
    SearchFeed.subscribe(searchBox, searchResultsCollection)
  }

// SearchFeed subscribe method
  subscribe : function(topic, collection) {
    session.subscribe(topic, function(result) {
      collection.add(result);
    });
  }

在我看来，我会在我的集合中听“添加”并为每个结果创建一个 View 并呈现它。

我认为我的代码结构不合理 -
1.“SearchFeed.subscribe”是否在正确的位置？根据我的观点，我正在执行此代码可以吗？也许它应该在模型上？
2. 集合更改(传递给订阅，SearchFeed 更改它然后听“添加”)管道是否是执行此操作的正确方法？

Answer 1

不确定 Backbone/Autobahn 的理智、解耦结构会是什么样子，但预先考虑这些方面非常重要。

FWIW，您可以在此处找到 2 种变体的简单表单示例:

• Knockout-based using MVVM
• ExtJS based

ExtJS 代码正在使用 AutobahnExtJS ，它为 AutobahnJS 提供专门的 ExtJS 数据代理。

基于 Knockout 的代码不需要额外的东西——它也比 ExtJS 变体更长，部分原因是它的功能更丰富。所以你不应该直接比较代码长度。

就我个人而言，我发现 Knockout+Autobahn 方法非常好:你有一个干净的分层:Autobahn 实时代码只与 View 模型交互，而 View 模型是数据绑定(bind)到 View 的。

披露:我是 AutobahnJS 的原作者, AutobahnPython , AutobahnAndroid并为 Tavendo 工作。