Javascript 搜索表单和结果的主干结构？

我第一次使用Backbone.js，试图了解它的工作原理。我有一个搜索表单，它通过Ajax获取结果，并将结果动态写入页面

我现在正试图找出如何在主干中最好地构造它，但我不完全理解如何将表单和结果连接在一起

这是我的HTML：

<form id="flight-options"> <!-- options for user to choose-->
<input type="radio" name="journey" value="single">Single<br/><input type="radio" name="journey" value="return">Return
<input type="checkbox" name="airline" value="aa">AA<br><input type="checkbox" name="airline" value="united">United
</form>
<div id="results"> <!-- results, written by Ajax -->
<h3>Results</h3>
<ul id="results-list">
</div>

我的问题是:

这基本上是一个合理的结构吗？一个视图用于表单，一个视图用于结果——第一个视图更新模型，第二个视图监视模型

我还想在出现新结果时更新

结果标题的内容-在上面的代码中，哪里是最合适的地方

当用户单击表单输入时，我想在输入上切换

所选的

类-在上面的代码中，这样做的逻辑位置在哪里 谢谢你的帮助

是的，这是一种逻辑组织，也是使用主干视图的一种很好的方式

您可以通过两种方式来实现这一点：

• 为标题（例如，

  SearchResultsTitleView

  ）提供一个单独的视图，该视图还侦听模型上的更改。这对我来说似乎有点过分
• 让您的

  SearchResultsView

  更新标题
  和结果
  。与其将自身绑定到

  #结果列表

  ，它还可以绑定到

  #结果

  ，并具有两个功能，一个用于更新每个子级

这似乎是

SearchFormView

的责任，要么监听模型上的更改，要么在事件发生时简单地更新状态

---

非常感谢-抱歉，这不是最令人兴奋的问题，但需要一些指导！

  var SearchModel = Backbone.Model.extend({
    performSearch: function(str) {
      // fire the ajax request.  provide a bound
      // _searchComplete as the callback
    },
    _searchComplete: function(results) {
      this.set("searchResults", results);
    }
  });
  var SearchFormView = Backbone.View.extend({
    tagName: "form",
    id: "flight-options",
    events: {
      "click input": "getResults"
    },
    getResults: function() {
      // Get values of selected options, use them to construct Ajax query. 
      // Also toggle 'selected' CSS classes on selected inputs here?
      this.model.performSearch(options);
    }
  });
  var SearchResultsView = Backbone.View.extend({
    tagName: "ul",
    id: "results-list",
    initialize: function() {
        this.model.on("change:searchResults", this.displayResults, this);
    },
    displayResults: function(model, results) {
      //append results to results-list here.   
      //update contents of blurb here?
    }
  });
  var searchModel = new SearchModel();
  var searchFormView = new SearchFormView({ model: searchModel });
  var searchResultsView = new SearchResultsView({ model: searchModel });