简单的骨干搜索页面 - 你会怎么做呢？ [英] Simple Backbone search page - how would you do it?

问题描述

我想用骨干实现一个简单的搜索页面。它不是一个单一的网页应用程序，但仍想构建我的JavaScript code。使用骨干。搜索页面包含一个搜索表单和搜索结果。搜索是通过AJAX完成并已保存在历史。当页面从历史加载，搜索查询参数应该被装入的形式。搜索表单和所述搜索结果可以被实现为Backbone.View的。不过，我已经胶合他们共同的问题。

I'm want to implement a simple search page using Backbone. It is not a single page application, but still would like to structure my JavaScript code using Backbone. A search page consists of a search form and search results. The search is done via AJAX and has to be saved in history. When the page is loaded from history, search query parameters should be loaded into the form. The search form and the search results can be implemented as Backbone.View's. However, I have problems glueing them together.

我想我需要我某种控制器。有一个Backbone.Router，但它是正确的地方？应该在哪里AJAX调用放在哪里？

What I think I need i some sort of controller. There is a Backbone.Router, but is it the right place? Where should the AJAX call be placed?

这样页面的结构任何意见是值得欢迎的。

Any advice on the structure of such page is welcomed.

推荐答案

您可以创建一个 SearchModel 。在 SearchModel 将不得不像一个方法：performSearch（字符串），将脱火的AJAX调用。当调用返回的模式可以做这样的事情：

You can create a SearchModel. The SearchModel would have a method like: "performSearch(string)" that would fire off your ajax call. When the call returns the model could do something like:

this.set("searchResults", ajaxResult)

和你的意见可以绑定到模型的该属性：

and your views can bind to that property of the model:

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

参考例如搜索表单视图：

example search form view for reference:

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

这篇关于简单的骨干搜索页面 - 你会怎么做呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！