0

バックエンドに Django を使用し、ユーザー応答フロントエンドに Backbone を使用する Web アプリケーションを構築しています。

ユーザーが検索を実行する (または既存の検索結果をさらに読み込む) と、Django が提供する部分的なテンプレートを使用して、Ajax 経由で結果を取得します。

これは問題なく機能しますが、検索フィルターを更新して、ユーザーが結果のないクエリセットを絞り込むことができないようにしたいと思います。

例: ユーザーが $1000 ～ $3000 の車を検索し、利用できる青い車がない場合、検索フォームで「青」のカラー セレクターをグレー表示にしたいと考えています。そのため、結果を返すだけでなく、使用可能な色を含む JSON オブジェクトも返します。

私の質問は次のとおりです。結果をページの HTML 要素に挿入する方法と、テンプレート フラグメントで JSON を返す方法を知っています。しかし、Backbone 内からその JSON にアクセスするにはどうすればよいでしょうか?

これが私のバックボーン モデルです。Ajax リクエストを実行するときに検索イベントをリッスンし、その 'results' プロパティを Ajax によって返されたテンプレート フラグメントに設定します。

var SearchModel = Backbone.Model.extend({  ..
  performSearch: function() {
  $.get(this.get("querystr"), function(html) {
    self.set("results", html);
    // TODO: How to extract JSON results
  });
  } ...
 });

Django が Ajax 経由で返すテンプレート フラグメントには、HTML と JSON の両方が含まれています。

<script type="text/javascript">
  var queryset_propeties = JSON.parse('{{queryset_properties|jsonify|escapejs}}');
</script>
<ul id="results">
{% for results in results %}
<li>{{ result }}</li>
{% endfor %}    
</ul>

また、検索モデルの結果プロパティへの変更をリッスンし、フロントエンドを更新するバックボーン コードもいくつかあります。

var SearchResultsView = Backbone.View.extend({ ...
  initialize: function() {
    this.model.on("change:results", this.displayResults, this);
    this.render();
  } ...
  displayResults: function(model, results) {
   this.$el.html(self.model.get('results'));
   // TODO: Use queryset_properties object to update search filters?
   console.log('queryset_properties', queryset_properties);
  } ...
});

私の問題は、queryset_propertiesオブジェクトが最新ではなく、バックボーン コード内からアクセスする方法がわからないことです。

私は次のことを考えました：

  1. $.get1 つは HTML ファイル、もう 1 つは JSON ファイルに対する2 つの呼び出しを行います。余分な HTTP オーバーヘッドがあるため、これは避けたいと思います。
  2. Django からテンプレートを返すのではなく、Ajax 経由でのみ JSON を返し、これを使用してバックボーンのすべての HTML を更新します。ただし、HTML を返すことにより、Django アプリケーションは非 JS ユーザー (検索ボットなど) に対しても機能するため、これは避けたいと考えています。これは重要です。
  3. 何らかの方法で、返された HTML から JSON オブジェクトを抽出し、それをバックボーン モデル属性として設定して、通常の方法で使用できるようにします。

何か案は？

4

1 に答える 1

0

私の質問は次のとおりです。結果をページの HTML 要素に挿入する方法と、テンプレート フラグメントで JSON を返す方法を知っています。しかし、Backbone 内からその JSON にアクセスするにはどうすればよいでしょうか?

これらのリクエストの代わりに$.get、 Backbone fetchを使用してください。適切な成功と、jQuery の$.get.

バックボーンの方法で行うには、まずモデルの URLを設定する必要があります。

var SearchModel = Backbone.Model.extend({
    url: this.get("querystr")
});

モデル呼び出しを初期化した後fetch:

var sm = new SearchModel({querystr: "http://example.com?car"});
sm.fetch({ // calls model's url
    success: function (model) {
        // you can access the returned json object here by doing:
        model.get('price'); // assuming your json looks like { price: 500 }
    },
    error: function (model) {
    }
 });

ドキュメンテーション

短いチュートリアル

于 2013-06-11T07:56:55.743 に答える