搜索表单和结果的骨干结构？

Question

我是第一次使用Backbone.js,并试图了解它是如何工作的.我有一个搜索表单,通过Ajax提取结果并动态地将它们写入页面.

我现在正试图弄清楚如何在Backbone中最好地构建它 - 我读了这个问题,但我并不完全理解如何将表单和结果连接在一起.

这是我的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>

以下是我在构建Backbone代码的方法:

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

我的问题:

1. 这基本上是一个合理的结构使用,一个视图的形式和一个结果 - 第一个视图更新模型,第二个视图观看模型？
2. 我还想<h3>在有新结果时更新结果标题的内容- 在上面的代码中哪里是最明智的地方？
3. selected当用户点击表单输入时,我想在输入上切换类 - 在上面的代码中,在哪里这样做的逻辑位置？

谢谢你的帮助.

Answer 1

1. 是的,这是一个逻辑组织,也是使用Backbone Views的好方法.
2. 你可以通过几种方式解决这个问题:
   • 有一个单独的标题视图(例如SearchResultsTitleView),也可以监听模型的变化.这对我来说似乎有些过分.
   • 让您SearchResultsView同时更新标题<h3>和结果<ul>.#results-list <ul>它可以绑定到#results <div>并具有两个函数,而不是将自身绑定到它,一个用于更新每个子节点.
3. 这似乎是责任SearchFormView,要么监听模型上的更改,要么只是在事件发生时更新状态.