javascript - 搜索表单和结果的 Backbone 结构？

Question

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

我现在正试图弄清楚如何最好地在 Backbone 中构建它 - I read this SO question ，但我不完全理解如何将表单和结果连接在一起。

这是我的 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. 这基本上是一个合理的结构吗，一个 View 用于表单，一个 View 用于结果 - 第一个 View 更新模型，第二个 View 观察模型？
2. 我还想更新 <h3> 的内容有新结果时的结果标题 - 在上面的代码中，哪里是最明智的做法？
3. 我想切换 selected当用户单击表单输入时输入上的类 - 在上面的代码中，执行此操作的逻辑位置在哪里？

感谢您的帮助。

Answer 1

1. 是的，这是一个合乎逻辑的组织，也是使用主干 View 的好方法。
2. 您可以通过几种方式解决这个问题:
   • 有一个单独的标题 View (例如 SearchResultsTitleView )，它还可以监听模型的变化。这对我来说似乎有点过分。
   • 有你的SearchResultsView更新两个标题 <h3>和结果 <ul> .而不是将自己绑定(bind)到 #results-list <ul> , 它可能绑定(bind)到 #results <div>并有两个功能，一个用于更新每个 child 。
3. 这似乎是 SearchFormView 的责任，或者监听模型的变化，或者在事件发生时简单地更新状态。