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

我的问题：

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

感谢您的帮助。

Answer 1

是的，这是一个合乎逻辑的组织，也是使用Backbone Views的好方法。
你可以通过几种方式解决这个问题：
- 为标题提供单独的视图（例如SearchResultsTitleView），该视图还会侦听模型的更改。这对我来说似乎有些过分。
- 让SearchResultsView更新标题<h3>和结果<ul>。它可能绑定到#results-list <ul>而不是绑定到#results <div>，而是有两个函数，一个用于更新每个孩子。
这似乎是SearchFormView的责任，要么监听模型上的更改，要么只是在事件发生时更新状态。

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

1 个答案: