0

我正在构建一个 Web 应用程序，它使用 Django 作为后端，使用 Backbone 作为用户响应前端。

当用户执行搜索（或为现有搜索加载更多结果）时，我使用 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>

我还有一些 Backbone 代码可以监听搜索模型的 results 属性的变化，并更新前端：

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对象不是最新的，我不知道如何从 Backbone 代码中访问它。

我想到了以下几点：

  1. 进行两次$.get调用，一次调用 HTML 文件，一次调用 JSON 文件。由于额外的 HTTP 开销，我想避免这种情况。
  2. 仅通过 Ajax 返回 JSON，并使用它来更新 Backbone 中的所有 HTML，而不是从 Django 返回模板。不过我想避免这种情况，因为通过返回 HTML，Django 应用程序适用于非 JS 用户（如搜索机器人），这很重要。
  3. 以某种方式从返回的 HTML 中提取 JSON 对象，并将其设置为 Backbone 模型属性，然后我可以以通常的方式使用该属性 - 但是如何做到这一点，不使用正则表达式或同样混乱的东西？

有任何想法吗？

4

1 回答 1

0

我的问题是：我知道如何将结果注入到页面的 HTML 元素中，并且我知道如何在模板片段中返回 JSON。但是如何从 Backbone 内部访问该 JSON？

不要使用这些$.get请求，而是使用 Backbone fetch。它具有适当的成功和错误回调，就像 jQuery 的$.get.

为了以 Backbone 方式进行操作，首先您必须设置模型的 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 回答