带骨干的解耦AutobahnJS (WebSockets)

Question

我有一个具有简单搜索表单的主干应用程序，当用户在这个搜索上写东西时，我使用autobahn在搜索表单上订阅给定的文本(例如，我搜索"foo"，我订阅"foo")。

我怎样才能区分高速公路逻辑？目前，在我看来，当用户单击submit时，我会做接下来的事情-

// 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);
    });
  }

在我的观点中，我听“添加”在我的集合，并为每个结果创建一个视图，并呈现它。

我觉得我的代码没有很好的结构-

1. "SearchFeed.subscribe“在正确的地方吗？我可以在我的视图上做这段代码吗？也许它应该出现在模特身上？
2. 收集更改(传递到订阅，SearchFeed更改它，然后听“添加”)管道是正确的方式吗？

Answer 1

不确定主干/Autobahn的结构是什么样子的，但是预先考虑这些方面是非常重要的。

FWIW，您可以在以下两个变体中找到一个简单的表单示例：

• 基于敲除的MVVM
• 基于ExtJS的

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

基于Knockout的代码不需要额外的内容--它也比ExtJS变体更长，部分原因是它的特性更丰富。因此，您不应该直接比较代码长度。

就我个人而言，我发现Knockout+Autobahn方法相当不错:您有一个干净的分层: Autobahn实时代码只与视图模型交互，视图模型是数据绑定到视图的。

披露:我是AutobahnJS，AutobahnPython，AutobahnAndroid和Tavendo的原作者。