9

私は初めてBackbone.jsを使用していて、それがどのように機能するかを頭に入れようとしています。Ajaxを介して結果を取得し、それらを動的にページに書き出す検索フォームがあります。

私は今、バックボーンでこれを構造化するための最良の方法を見つけようとしています-私はこのSOの質問を読みましたが、フォームと結果を一緒に配線する方法を完全には理解していません。

これが私の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>

バックボーンコードの構造化について私が考えている方法は次のとおりです。

  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. これは基本的に使用するのに適した構造であり、フォーム用に1つのビュー、結果用に1つのビューがあります。最初のビューはモデルを更新し、2番目のビューはモデルを監視しますか？
  2. また、新しい結果があったときに結果ヘッダーの内容を更新したいのですが<h3>、上記のコードでこれを行うのに最も賢明な場所はどこですか？
  3. ユーザーがフォーム入力をクリックしたときに入力のクラスを切り替えたいselected-上記のコード内でこれを行うための論理的な場所はどこですか？

ご協力いただきありがとうございます。

4

1 に答える 1

5
  1. はい、それは論理的な構成であり、バックボーンビューを使用するための優れた方法です。
  2. これにはいくつかの方法でアプローチできます。
    • SearchResultsTitleViewモデルの変更もリッスンするタイトル（例）用に別のビューを用意します。それは私には少し過剰に思えます。
    • タイトルと結果SearchResultsViewの両方を更新してください。にバインドする代わりに、にバインドして2つの関数を使用する場合があります。1つは各子を更新するためのものです。<h3><ul>#results-list <ul>#results <div>
  3. SearchFormViewこれは、モデルの変更をリッスンするか、イベントが発生したときに状態を更新するかのいずれかの責任のように思われます。
于 2013-01-08T02:55:29.050 に答える