简单的骨干搜索页面 - 你会怎么做？

Question

我想使用Backbone实现一个简单的搜索页面.它不是单页面应用程序,但仍希望使用Backbone构建我的JavaScript代码.搜索页面包含搜索表单和搜索结果.搜索是通过AJAX完成的,必须保存在历史记录中.从历史记录加载页面时,应将搜索查询参数加载到表单中.搜索表单和搜索结果可以实现为Backbone.View.但是,我在将它们粘合在一起时遇到了问题.

我认为我需要某种控制器.有一个Backbone.Router,但它是正确的地方吗？应该在哪里放置AJAX呼叫？

欢迎任何有关此页面结构的建议.

Answer 1

你可以创建一个SearchModel.该SearchModel会有类似的方法:"performSearch(串)",将火关你的Ajax调用.当调用返回时,模型可以执行以下操作:

this.set("searchResults", ajaxResult)

并且您的视图可以绑定到模型的该属性:

// SearchResultsView
Backbone.View.extend({
    initialize: function() {
        this.model.on("change:searchResults", this.displayResults, this);
    },
    displayResults: function(model, results) {
        // do whatever...
    }
});

示例搜索表单视图供参考:

Backbone.View.extend({
   events: {
      "submit": "formSubmitted"
   },
   formSubmitted: function(e) {
      this.model.performSearch(e.target.value);
   }
});

示例SearchModel供参考:

Backbone.Model.extend({
   performSearch: function(string) {
      // fire your ajax request.  provide a bound
      // _searchComplete as the callback
   },
   _searchComplete: function(results) {
     this.set("searchResults", results);
   }
});